你的位置:首页 > Java教程

[Java教程]jquery.validate 基础


<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>  <script type="text/javascript" src="js/jquery.validate-1.14.0.js"></script>  <script type="text/javascript">  $().ready(function() {    var validate= $("#signupForm").validate({        rules: {          firstname: "required",          email: {          required: true,          email: true          },          password: {          required: true,          minlength: 5          },          confirm_password: {          required: true,          minlength: 5,          equalTo: "#password"          }        },        messages: {          firstname: "请输入姓名",          email: {          required: "请输入Email地址",          email: "请输入正确的email地址"          },          password: {          required: "请输入密码",          minlength: "密码不能小于{0}个字 符"          },            confirm_password: {          required: "确认密码",          minlength: "确认密码不能小于5个字符",          equalTo: "两次输入密码不一致不一致"        }      },      //把错误信息放到一处处理与 errorPlacement 函数连用      groups:{        login:"firstname email password confirm_password"      },      errorPlacement:function(error,element){        error.insertBefore("#error_info");        },      //提交表单后焦点在第一个错误表单内      focusInvalid:true,      //指定错误提示的css类名      errorClass:"error_info",      //指定验证通过的css类名      validClass:"success_info",      //验证通过提交表单      submitHandler:function(form){        console.info("提交表单"+$(form).serialize());      },      invalidHandler:function(event,validator){        console.info("表单错误"+validate.numberOfInvalids());      },      // 取消某个元素的校验      ignore:"#firstname",      onfocusout:function(){        return false;      }    });    $("#check").click(function(){      var flag1=$("#signupForm").valid();//检查表单是否有效      var flag2=$("#firstname").rules();//查询元素的校验规则      var flag3=$("#firstname").rules("add",{minlength:2,maxlength:10});//添加元素的校验规则      var flag4=$("#firstname").rules("remove","minlength");//删除元素的校验规则      var flag5=validate.form();//验证表单是否有效      var flag6=validate.element("#firstname");//验证表单某个元素是否有效      validate.resetForm();//恢复表单原来的状态      var flag7=validate.numberOfInvalids();//获得错误元素个数      console.info(flag7);    });    //针对某个元素显示特定的提示信息    validate.showErrors({      firstname:"ERROR"    });    });  </script></head><body>  <form id="signupForm" method="get" action="">    <p id="error_info">      <label for="firstname">Firstname</label>      <input id="firstname" name="firstname" />    </p>    <p>      <label for="email">E-Mail</label>      <input id="email" name="email" />    </p>    <p>      <label for="password">Password</label>      <input id="password" name="password" type="password" />    </p>    <p>      <label for="confirm_password">确认密码</label>      <input id="confirm_password" name="confirm_password" type="password" />    </p>    <p>      <input class="submit" type="submit" value="Submit"/>    </p>    <p>      <input class="c" type="button" value="检查表单是否有效" id="check"/>    </p></form></body></html>