jquery-validate使用.md

• html

  <form id="s_form" class="form-horizontal" action="http://www.baidu.com" >
      <div class="form-group">
          <label for="s_uname" class="col-sm-2 control-label">用户名</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" name="s_uname" id="s_uname" placeholder="UserName">
              <p class="help-block">不少于3个字符,用户名不能重名<span class="text-danger">aaa</span></p>
          </div>
      </div>
      <div class="form-group">
          <label for="s_pwd" class="col-sm-2 control-label">密码</label>
          <div class="col-sm-10">
              <input type="password" class="form-control" name="s_pwd" id="s_pwd" placeholder="Password">
              <p class="help-block">密码不少于6位</p>
          </div>
      </div>
      <div class="form-group">
          <label for="s_cpwd" class="col-sm-2 control-label">确认密码</label>
          <div class="col-sm-10">
              <input type="password" class="form-control" name="s_cpwd" id="s_cpwd" placeholder="ConfirmPassword">
              <p class="help-block">确认密码</p>
          </div>
      </div>
      <div class="form-group">
          <label for="s_email" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" name="s_email" id="s_email" placeholder="Email">
              <p class="help-block">email格式</p>
          </div>
      </div>
      <div class="form-group">
          <label for="s_phone" class="col-sm-2 control-label">手机号码</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" name="s_phone" id="s_phone" placeholder="Phone">
              <p class="help-block">phone格式</p>
          </div>
      </div>
      <div class="form-group">
          <label for="s_avatar"class="col-sm-2 control-label">头像</label>
          <div class="col-sm-10">
              <input type="file" id="s_avatar" name="s_avatar">
              <p class="help-block">上传jpg/png格式文件</p>
          </div>
        </div>
      <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                  <label> <input name="s_check" type="checkbox"> 记住密码
                  </label>
              </div>
          </div>
      </div>
      <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">提交</button>
          </div>
      </div>
  </form>
  

• js

  <script src="js/jquery-1.9.1.js"></script>
  <script src="js/jquery.validate.js"></script>
  <script src="js/additional-methods.js"></script>
  <script>
  //自定义方法，完成手机号码的验证
  //name:自定义方法的名称，method：函数体, message:错误消息
  $.validator.addMethod("phone", function(value, element, param){
      //方法中又有三个参数:value:被验证的值， element:当前验证的dom对象，param:参数(多个即是数组)
      //alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]);
      return new RegExp(/^1[3458]\d{9}$/).test(value);
  
  }, "手机号码不正确");
  $(function(){
      $("#s_form").validate({
          debug:true,
          rules:{
              s_uname:{
                  required:true,
                  minlength:3,
                  remote:"LoginServlet.do?method=checkUsername"//这里返回值用TRUE/false
              },
              s_pwd:{
                  required:true,
                  minlength:6
              },
              s_cpwd:{
                  required:true,
                  equalTo:"#s_pwd"
              },
              s_email:{
                  required:true,
                  email:true
              },
              s_phone:{
                  required:true,
                  phone:true
              },
              s_avatar:{
                  required:true,
                  extension:"jpg|gif|png|jpeg"
              }
          },
          messages:{
              s_uname:{
                  required:"请输入用户名",
                  minlength:$.validator.format("用户名最小长度为{0}"),
                  remote:"用户名被占用"
              },
              s_pwd:{
                  required:"请输入密码",
                  minlength:$.validator.format("密码最小长度为{0}")
              },
              s_cpwd:{
                  required:"请再次输入密码",
                  equalTo:"两次密码必须一致"
              },
              s_email:{
                  required:"请输入邮箱地址",
                  email:"请输入正确的邮箱"
              },
              s_phone:{
                  required:"请输入手机号码"
              },
              s_avatar:{
                  required:"请上传头像",
                  extension:"文件的后缀名必须为jpg|gif|png|jpeg"
              }
          }
      });
  });
  </script>