用于验证用户注册的信息是否正确我们采用了jQuery.validator的验证,相关教程在
菜鸟教程里 , 那里有相关的术语。。
下面我给出一个小例子,这是在做一个项目的时候碰到的,也是才接触,并没有什么深刻的理解;为根据我的理解来解释一下这个小例子,有不对的地方还望各位博友们指出来,我们相互学习,看代码与注释吧
<form:form id="registerForm" method="post" action="#" autocomplete="off" modelAttribute="user">
<div class="clearfix">
<!-- ALERT -->
<div id="error" class="alert alert-mini alert-danger margin-bottom-30" style="display: none">
</div>
<!-- /ALERT -->
<div id="message" style="display: none"></div>
<form:errors />
<!-- mobile -->
<div class="form-group">
<form:input path="userName" class="form-control" placeholder="手机号码" required="" maxlength="11" cssErrorClass="form-control error" />
<form:errors path="userName" class="error" />
</div>
</div>
</form:form>
第二部分js中
var validate;
$(document)
.ready(
function() {
validate = $("#registerForm").validate({
//绑定一个注册按钮form的校验,对这个表单的提交进行验证
//根据需求赋值,具体什么意思参照上面的菜鸟教程地址
onsubmit: false,
focusInvalid: false,
errorClass: "error",
onfocusout: false,
onkeyup: false,
onclick: false,
ignoreTitle: true,
//我的理解是rules代表一种规范原则,要是违背了就会弹出来message中与之相对应的错误提示
rules: {
//userName是input表单的一个属性,输入电话的输入框
userName: {
required: true,//必须要填写
maxlength: 11,//最大长度为11位
isMobile: true//用下面的方法来判断是否符合,这个为自定义的校验
}
},
//这里是以键值对的形式出现rules与messages要对应
messages: {
userName: {
required: "请输入手机号码!",//对应required的错误信息,没有写就提示请输入手机号码!,下面的字段同理
maxlength: "手机号码不能超过11位!",
isMobile: "请正确填写您的手机号码"
},
}
});
//在这里呢我们添加了对isMobile这个字段的校验,如果错误就会有messages中定义的信息
jQuery.validator
.addMethod(
"isMobile",
function(value, element) {
var length = value.length;
var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
return this.optional(element) || (length == 11 && mobile
.test(value));
}, "请正确填写您的手机号码");
});
作者:困惑的阿星
来源:CSDN
原文:https://blog.csdn.net/qq_40183281/article/details/86601644
版权声明:本文为博主原创文章,转载请附上博文链接!