1.讲解
1.1 Validate 要依赖jQuery的,所以HTML中js的引用关系如下:
<script type="text/javascript" src="../js/common/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="../js/common/jquery-validation-1.14.0/jquery.validate.min.js" ></script>
<script type="text/javascript" src="../js/common/jquery-validation-1.14.0/additional-methods-common.js" ></script>
<script src="../js/controller/blog-validate.js" type="text/javascript" charset="utf-8"></script>
第一个就不用说了,第二个是验证插件(必须引用),第三个是自定义验证规则,第四个我们自己的js
1.2 注册form的结构:
<form class="am-form am-form-horizontal yf-form-tips add-form">
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">用户名: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="text" id="" name="addFormName" placeholder="请输入您的用户名" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">密码: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="password" id="password1" name="addFormPass1" placeholder="请输入您的密码" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">确认密码: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="password" id="" name="addFormPass2" placeholder="请再次输入您的密码" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormPhone" class="am-u-sm-2 am-form-label">手机号: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="text" id="" name="addFormPhone" placeholder="请输入您的手机号" class="" maxlength="11">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormAdd" class="am-u-sm-2 am-form-label am-vertical-align-top yf-pt0">联系地址: </label>
<div class="am-u-sm-10 yf-pl10">
<textarea id="" placeholder="请输入您的联系地址" name="addFormAdd" class="" maxlength="100"></textarea>
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<div class="am-u-sm-offset-2 yf-pl10">
<button type="submit" class="am-btn am-btn-primary" onclick="submitInfo()">提交</button>
</div>
</div>
</form>
1.3 主要的js(blog-validate.js):
//表单验证规则
var formValid = $(".add-form").validate({
rules: {
"addFormName":{
"required":true, //必填字段
},
"addFormPass1":{
"required":true
},
"addFormPass2":{
"required":true,
"equalTo": "#password1" //输入值必须和 #password1 相同
},
"addFormPhone":{
"required":true,
"digits":true, //必须输入整数
"minlength":11 //输入长度最小是 11
},
"addFormAdd":{
"required":true
}
},
messages: {
"addFormName":{
"required":"用户名不能为空哦"
},
"addFormPass1":{
"required":"密码不能为空哦"
},
"addFormPass2":{
"required":"确认密码不能为空哦",
"equalTo":"两次输入的密码不一致哦"
},
"addFormPhone":{
"required":"手机号不能为空哦",
"digits":"手机号格式不正确哦",
"minlength":"手机号格式不正确哦",
},
"addFormAdd":{
"required":"地址不能为空哦"
}
},
errorPlacement:function(error,element) {
error.appendTo(element.siblings(".yf-error-tip"));
}
});
//提交前开始验证
var submitInfo = function(){
if($('.add-form').valid()){
alert('恭喜你,验证通过了!');
};
}
说明:
主要通过 $('.add-form').valid()
触发验证;
提示信息可在 errorPlacement
中配置放置的位置,提示默认的样式是”error”,如需修改,参考validate ()
可选项中的”errorClass”
2.有几个特别要注意的地方:
- validate ()的对象
$(".add-form")
对应的DOM标签必须是form标签 - 执行
$(".add-form").validate
时,form在HTML结构中是存在的,类似jquery的remove之后或者angularJs的ngIf,都会导致验证失败 validate()
的属性”rules”必须对应验证表单中标签的name属性- 验证规则可以直接写在HTML中(不推荐,提示信息也不好处理),比如:
<input type="text" id="" name="addFormName" placeholder="请输入您的用户名" class="" maxlength="20" required minlength='2'>