jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。
http://www.w3cschool.cc/jquery/jquery-plugin-validate.html w3cschool学习资料。
其实一共可分为3个步骤:
1.添加两个js
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
2.撰写校验文件 下面是我的校验文件
包括异步检测实例和自定义校验规则实例
$.validator.setDefaults({ submitHandler: function(form) { // only for demo purposes alert("submitted!"); //form.ajaxSubmit(); } }); //验证是否是手机 $.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile = /^(1(([35][0-9])|(47)|[8][0126789]))\d{8}$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "请正确填写您的手机号码"); //验证数据库是否存在 $.validator.addMethod("checkUserExist",function(value,element){ var user = value; $.ajax({ type:"POST", async:false, url:"checkUserAction", data:"username="+user, success:function(response){ if(response){ res = true; }else{ res = false; } } }); return res; },"<font color='#E47068'>用户名已存在</font>"); $().ready(function() { //alert("dsdsd"); // validate the form when it is submitted var validator = $("#registerNormal").validate( { errorPlacement: function(error, element) { // Append error within linked label //alert(error) $( element ).closest( "form" ).find( "#dd" ).html(""); $( element ).closest( "form" ).find( "#dd" ).append( error ); }, errorElement: "span", onkeyup:false, rules:{ linknum:{ required:true, isMobile:true }, username:{ required:true, minlength:4, maxlength:16, checkUserExist:true, }, password:{ required:true, minlength:4, maxlength:16, }, passwordAgain:{ required:true, equalTo:'#password' } }, messages: { username: { required: " 用户名不能为空", minlength: " 用户名在4-16位之间", maxlength: " 用户名在4-16位之间" }, password: { required: " 密码不能为空", minlength: " 密码输入太短", maxlength: " 密码输入超长" }, passwordAgain:{ required: " 密码不能为空", equalTo:"两次密码不一致" }, linknum:{ required: " 联系方式不能为空", isMobile: "输入正确的号码" } } }); $(".cancel").click(function() { validator.resetForm(); }); });
3.核对html中各个元素名称是否与校验文件中的关键字匹配<style> .error1 { color:#ff7800; } </style> <form action="registerAction" style="" method="post" class="form-widget" id="registerNormal"> <div class="form-warning" data-role="error"><p id="dd"></p></div> <div class="form-group"> <label class="form-label">账号 <span class="error1">*</span></label> <div class="form-control"> <label class="input-group"> <input type="text" name="username" value="" id="username" class="input-text" placeholder="用户名" data-role="input" /> </label> </div> </div> <div class="form-group"> <label class="form-label">密码 <span class="error1">*</span></label> <div class="form-control"> <div class="form-row13"> <label class="input-group"> <input type="password" name="password" id="password" class="input-text" placeholder="6-16位,不含空格"> </label> </div> </div> </div> <div class="form-group"> <label class="form-label">确认</label> <div class="form-control"> <div class="form-row13"> <label class="input-group"> <input type="password" name="passwordAgain" id="passwordAgain" class="input-text" placeholder="再次输入密码" /> </label> </div> </div> </div> <div class="form-group"> <label class="form-label">联系</label> <div class="form-control"> <label class="input-group"> <select class="input-text" name="select"> <option value="1">手机</option> <option value="2">QQ</option> </select> </label> </div> </div> <div class="form-group"> <label class="form-label">号码/ID <span class="error1">*</span></label> <div class="form-control"> <label class="input-group"> <input type="text" name="linknum" id="linknum" class="input-text"/> </label> </div> </div> <input type="hidden" name="backUrl" value=""> <div class="form-opt"> <div class="form-group"> <button class="btn btn-primary btn-large js-touch-state" type="submit" data-role="sublimt">提交</button> </div> <div class="form-group"> <p class="text-group">已有账号?<a href="login.jsp">立即登录></a></p> </div> </div> </form> <script type="text/javascript" src="js/validate/jquery.js"></script> <script type="text/javascript" src="js/validate/jquery.validate.js"></script> <script type="text/javascript" src="js/validate/signformValidatorClass.js"></script>