JQuery表单验证插件jquery.validate的使用
江迪
引入文件
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.validate.js"></script>
<script src="./js/messages_zh.js"></script>
普通用法
<body>
<form action="" id="registerForm">
<div class="form-item">
<div class="label-box">学号</div>
<div class="input-box">
<input type="text" class="txt" name="sno">
</div>
<!-- 存放错误信息 -->
<div class="error-msg"></div>
</div>
<div class="form-item">
<div class="label-box">性别</div>
<div class="input-box">
<input type="text" class="txt" name="sex">
</div>
<div class="error-msg"></div>
</div>
<div class="form-item">
<button type="button" id="btn-register">
注册
</button>
</div>
</form>
</body>
//js代码
$(function(){
var formvalidate=$("#registerForm").validate({
// 验证规则
rules:{
sno:{
required:true,
RegTest:"^H2103(?!0000)\\d{4}$"
},
sex:{
required:true,
RegTest:"^[男女]$"
}
},
// 验证不能通过以后的提示信息
messages:{
sno:{
required:"请输入学号",
RegTest:"学号格式不正确"
},
sex:{
required:"请输入性别",
RegTest:"性别输入错误"
},
},
// 验证不能通过的提示信息应该放在哪里
errorPlacement:function(errorElement,currentElement){
//errorElement代表产生的错误信息的元素 是一个JQuery对象
//currentElement代表当前表单正在验证的元素 是一个JQuery对象
currentElement.parent().next().append(errorElement)
},
errorClass:"error-tips"
});
$("#btn-register").on("click",function(event){
//验证一下表单里面的规则是否通过
if(formvalidate.form()){
alert("验证通过")
}else{
// 验证没有通过
}
})
// 添加自定义验证方法
$.validator.addMethod("RegTest", function(value, element,params) { //要验证的值 元素 函数自定义参数
var reg=new RegExp(params);
return reg.test(value);
}, "请输入正确格式！");
});
使用自定义属性
<body>
<div class="container">
<div class="page-header">
<h2 class="text-center text-primary">添加学生信息</h2>
</div>
<form class="form-horizontal" id="addStuInfo">
<div class="form-group">
<label class="control-label col-md-2">学生姓名</label>
<div class="col-md-7">
<input type="text" placeholder="请输入学生姓名" id="sname" class="form-control"
data-rule-required="true" data-msg-required="学生姓名不能为空">
</div>
<div class="col-md-3 tip"></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">学生性别</label>
<div class="col-md-7">
<select name="" id="ssex" class="form-control">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<!-- <div class="col-md-3 tip">用户名不能为空</div> -->
</div>
<div class="form-group">
<label class="control-label col-md-2">学生年龄</label>
<div class="col-md-7">
<input type="text" id="sage" placeholder="请输入学生年龄" class="form-control" data-rule-range="[18,65]"
data-rule-required="true" data-msg-required="年龄不能为空" data-rule-RegTest="^\d+$">
</div>
<div class="col-md-3 tip"></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">手机号码</label>
<div class="col-md-7">
<input type="text" id="stel" placeholder="请输入手机号码" class="form-control" data-rule-required="true"
data-msg-required="手机号不能为空"
data-rule-RegTest="^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$">
</div>
<div class="col-md-3 tip"></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">所属班级</label>
<div class="col-md-7">
<input type="text" id="cname" placeholder="请输入所属班级" class="form-control" data-rule-required="true"
data-msg-required="学号不能为空" data-rule-RegTest="^[HJ]210[1-9]$">
</div>
<div class="col-md-3 tip"></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">家庭地址</label>
<div class="col-md-7">
<input type="text" id="address" maxlength="100" placeholder="请输入家庭地址" class="form-control"
data-rule-required="true" data-msg-required="地址不能为空">
</div>
<div class="col-md-3 tip"></div>
</div>
<div class="form-group">
<label class="control-label col-md-2">爱好</label>
<div class="col-md-7">
<label class="checkbox-inline">
<!-- 复选框组只在第一个添加即可 name要相同 -->
<input type="checkbox" name="hobby" id="inlineCheckbox1" data-rule-required="true" data-msg-required="必须最少选一个爱好" value="看书"> 看书
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby" id="inlineCheckbox2" value="睡觉"> 睡觉
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby" id="inlineCheckbox3" value="晚游戏"> 玩游戏
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby" id="inlineCheckbox4" value="逛街"> 逛街
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby" id="inlineCheckbox5" value="写代码"> 写代码
</label>
</div>
<div class="col-md-3 tip"></div>
</div>
<div class="form-group">
<div class="col-md-7 col-md-offset-2">
<button type="button" class="btn btn-primary" id="saveData">保存数据</button>
<button type="button" class="btn btn-warning" id="goBack">返回列表</button>
</div>
</div>
</form>
</div>
</body>
$(function () {
// 表单验证
var formvalidate = $("#addStuInfo").validate({
// 验证不能通过的提示信息应该放在哪里
errorPlacement: function (errorElement, currentElement) {
//errorElement代表产生的错误信息的元素 是一个JQuery对象
//currentElement代表当前表单正在验证的元素 是一个JQuery对象
// 多选框结构不同
if(currentElement.attr("name")=="hobby"){
currentElement.parent().parent().next().append(errorElement)
}else{
currentElement.parent().next().append(errorElement)
}
},
errorClass: "error-tips"
});
// 检验是否通过
$("#saveData").on("click", function (event) {
//验证一下表单里面的规则是否通过
if (formvalidate.form()) {
// alert("验证通过")
} else {
// 验证没有通过
}
})
// 添加自定义验证方法
$.validator.addMethod("RegTest", function (value, element, params) { //要验证的值 元素 函数自定义参数
var reg = new RegExp(params);
return reg.test(value);
}, "请输入正确格式！");
})
类似资料：