jQuery Validate 插件为表单提供了强大的验证功能,在工作中用到了,写一个Demo。加自定义验证。
<form action="<%=path%>/vboss/savevbossInfo" method="post" class="form form-horizontal"
id="savevbossInfo">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-4"><span
class="c-red">*</span>IP地址:</label>
<div class="formControls col-xs-4 col-sm-4">
<input type="text" class="input-text" value="" placeholder=""
id="ip" name="ip" datatype="*4-16" style="border-radius:5px;"
nullmsg="用户名不能为空">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-4"><span
class="c-red">*</span>MAC地址:</label>
<div class="formControls col-xs-4 col-sm-4">
<!-- <div class="formControls col-xs-4 col-sm-4"> -->
<input type="text" class="input-text" value="" placeholder=""
id="mac" name="mac" datatype="*4-16" style="border-radius:5px;">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-4">邮箱:</label>
<div class="formControls col-xs-4 col-sm-4">
<input type="text" class="input-text" value="" placeholder=""
id="email" name="email" datatype="m" style="border-radius:5px;">
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
<div style="margin: auto;width:40%;">
<button type="submit" class="btn btn-primary radius"
id="admin-user-create" name="admin-user-create" >
<i class="icon-ok"></i> 添加
</button>
</div>
</div>
</div>
</form>
引入如下JS:
// 手机号码验证
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));
}, "请正确填写您的手机号码");
$(function(){
//表单验证
validate=$("#savevbossInfo").validate({
rules:{
ip:"required",
mac:"required",
email:{email:true},
mobile:{isMobile:true}
},
messages:{
ip:"IP地址不能输入为空",
mac:"MAC地址不能输入为空",
email:"请输入正确的Email",
mobile:{isMobile:"请正确填写手机号码"}
}
});
});
自定义验证参考:https://www.2cto.com/kf/201505/402781.html
http://www.runoob.com/jquery/jquery-plugin-validate.html