jquery validate的使用

标签：

验证模块：

submitform为包含需要验证控件的form表单

var validate = $("#submitform").validate({
        rules: {
            partyname: {//会员名不是必填
                required: false,
                rangelength:[6,20],
                isPartyNameOne:true,
                isPartyNameTwo:true,
                isPartyNameThree:true,
                remote: {//唯一性检验
                    url: "../partycs/validatePartyNameBoolean?random=" + Math.random(),     //后台处理程序
                    type: "post",               //数据发送方式
                    dataType: "json",           //接受数据格式   
                    data: {                     //要传递的参数
                        partyname: function() {return $("#partyname").val();}
                    }
                }
            },
            mobilenumber:{
                required: true,
                isMobile: true,
                remote: {//唯一性检验
                    url: "../partycs/validateMobileNumberBoolean?random=" + Math.random(),     //后台处理程序
                    type: "post",               //数据发送方式
                    dataType: "json",           //接受数据格式   
                    data: {                     //要传递的参数
                        mobilenumber: function() {return $("#mobilenumber").val();}
                    }
                }
            },
            password: {
                required: true,
                rangelength:[6,20]
            },
            password2: {
                required: true,
                rangelength:[6,20],
                equalTo:"#password"
            },
            captcha: {
                required: true,
                isCaptcha:true
            },
            realname:{
                required: function(element) {//当会员为个人时校验
                    var tip = $("input[name=‘partytype‘]:checked").val();
                    return tip == "个人";
                }
            },
            organization:{
                required: function(element) {//当会员为企业时校验
                    var tip = $("input[name=‘partytype‘]:checked").val();
                    return tip == "企业";
                },
                remote: {//唯一性检验
                    url: "../partycs/validateOrganizationNewBoolean?random=" + Math.random(),     //后台处理程序
                    type: "post",               //数据发送方式
                    dataType: "json",           //接受数据格式   
                    data: {                     //要传递的参数
                        organization: function() {return $("#organization").val();}
                    }
                }
            }
        },
        messages: {
            partyname: {
                required: ‘请输入会员名‘,
                rangelength: ‘请控制在6-20个字符范围‘,
                remote:‘会员名已被使用‘
            },
            mobilenumber:{
                required:‘请输入有效的手机号‘,
                remote:‘手机号码已被使用‘
            },
            password: {
                required: ‘请输入密码‘,
                rangelength: ‘密码长度必须大于等于6位，小于等于20位‘
            },
            password2: {
                required: ‘请输入密码‘,
                rangelength: ‘密码长度必须大于等于6位，小于等于20位‘,
                equalTo:‘两次密码输入不一致,请重新输入！‘
            },
            captcha: {
                required: ‘请输入手机验证码‘
            },
            realname:{
                required: ‘真实姓名不能为空‘
            },
            organization:{
                required: ‘公司名不能为空‘,
                remote:‘企业名已被使用‘
            }
        },
        errorPlacement: function (error, element) {//定义错误显示的位置
            var tipId = element.attr("id");
            if(tipId == "password"){
                $("#pswm").hide();
            }
            if(tipId == "captcha"){
                $("#captcha_warn").html(error);
                $("#captcha_warn").show();
            }
            if(tipId == "partyname"){
                $("#partyname_warn").html(error);
                $("#partyname_warn").show();
            }
            element.parent().find(".warn").append(error);//添加提示信息
            element.parent().find(".warn").show();//显示提示信息
        },
        success: function (label) {//验证通过后的操作
            var tipId = label.attr("id").split(‘-‘)[0];//得到当前 操作标签的id号
            if(tipId == "captcha"){
                $("#captcha_warn").html("");
            }
            if(tipId == "partyname"){
                var partyname = $("#partyname").val();
                if(partyname != ""){
                    $("#partyname_warn").val("");
                }
            }
            if(tipId == "password"){
                var password=trim($("#password").val());
                var lv = pwdLevel(password);
                if(lv==1){
                    $("#pwdlv_1").show();
                    $("#pwdlv_2").hide();
                    $("#pwdlv_3").hide();
                    $("#finish").hide();
                }else if(lv==2){
                    $("#pwdlv_2").show();
                    $("#pwdlv_3").hide();
                    $("#pwdlv_1").hide();
                    $("#finish").show();

                }else if(lv==3){
                    $("#pwdlv_3").show();
                    $("#pwdlv_2").hide();
                    $("#pwdlv_1").hide();
                    $("#finish").show();
                }else{
                    $("#pwdlv_1").hide();
                    $("#pwdlv_2").hide();
                    $("#pwdlv_3").hide();
                    $("#finish").hide();
                }
                $("#lv").val(lv);
            }
            label.parent().find(".warn").hide();//隐藏提示信息
        },
        onfocusout: function (element) {
            $(element).valid();
        },
        highlight: function (element, errorClass) {
        },
        submitHandler: function () {
            if(flag){
                flag = false;
            }else{
                flag = true;
                var lv = $("#lv").val();
                if(lv<2){
                    alert("密码强度必须中级以上！");
                    return;
                }
                $("#reback").attr("disabled", true);
                var partyname = trim($("#partyname").val());
                var mobilenumber = trim($("#mobilenumber").val());
                var identifycode=trim($("#captcha").val());                
                var type = "小二工作台注册";
                var realname = trim($("#realname").val());
                var password = trim($("#password").val());
                var password2 = trim($("#password2").val());
                var organization = $("#organization").val();
                var tradetype = $("input[name=‘tradetype‘]:checked").val();
                var partytype = $("input[name=‘partytype‘]:checked").val();
                var pass_length=getCharLength(password);
                var params = "mobilenumber=" + mobilenumber + "&identifycode=" + identifycode + "&type=" + type;
                $.ajax( {
                    type : "POST",
                    url : "../partycs/checkIdentifyCode",
                    contentType : "application/x-www-form-urlencoded; charset=utf-8",
                    data : params,
                    dataType : "json",
                    success : function(data) {
                        if (data.result == ‘success‘) {
                            //注册
                            var    params = "&partyname=" + partyname + "&mobilenumber=" + mobilenumber + "&mobilenumberisactive=1" + "&password=" + encodeURI(encodeURI(password)) +
                                    "&partytype=" + partytype + "&tradetype=" + tradetype + "&organization=" + organization + "&businesstype=trade&realname=" + realname;
                            insertPartyInformation(params);//调用插入方法
                        } else if(data.result == ‘sorry‘){
                            document.getElementById("captcha_warn").innerHTML="验证码过期，请重新发送!";
                            $("#submit").attr("disabled", false);
                             $("#reback").attr("disabled", false);
                             flag = false;
                            return false;
                        }else {
                            document.getElementById("captcha_warn").innerHTML="系统异常，校验验证码失败!";
                            $("#submit").attr("disabled", false);
                             $("#reback").attr("disabled", false);
                             flag = false;
                            return false;
                        }
                    },
                    error : function(data) {
                        document.getElementById("captcha_warn").innerHTML="系统异常，校验验证码失败!";
                        $("#submit").attr("disabled", false);
                         $("#reback").attr("disabled", false);
                         flag = false;
                        return false;
                    }
                });
            }
        }
    });

点击提交时做验证：
    $("#submit").click(function(){
         $("#submitform").submit();
    });

html页面：

<form id="submitform" method="post" action="">
      <div style="padding-top:15px;">
          <span class="label" style="position: relative;padding-top: 6px"><span id="warn">*</span><label for="mobilenumber">手机号:</label></span>
          <div class="t_right"><input id="mobilenumber" name="mobilenumber" maxlength="11"/><span id="mobilenumber_warn" class="warn" style="color: red;display: none;margin-left: 10px;"></span></div>
      </div>
      <div style="padding-top:15px;">
          <input id="validmobile" type="button" value="验证手机"/>
          <div class="t_right"><input id="captcha" name="captcha" maxlength="4" value="" placeholder="输入手机验证码"/><span id="captcha_warn" style="color: red;margin-left: 10px;"></span></div>
      </div>
      <div style="padding-top:15px;">
          <span class="label" style="position: relative;padding-top: 6px"><span id="warn">*</span><label>商业类型:</label></span>
          <div style="text-align: left;" >
              /*radio选项*/                    
          </div>
      </div>
    <div style="margin-top: 10px;margin-left: 115px;">
        <label style="color: red;position: relative;">商业类型仅做数据统计用，不对用户使用产品权限造成任何影响</label>
    </div>
    <div style="padding-top:15px;">
          <span class="label" style="position: relative;padding-top: 6px"><span id="warn">*</span><label>组织类型:</label></span>
          <div style="text-align: left;" >
              /*radio选项 个人或企业*/
          </div>
      </div>
      <div id="divpartyname" style="padding-top:15px;">
            <span class="label" style="position: relative;padding-top: 6px"><label for="partyname">会员名:</label></span>
            <div class="t_right"><input id="partyname" name="partyname" placeholder="非必填项，建议输入"/><span id="partyname_warn" style="color: red;margin-left: 10px;"></span></div>
    </div>
      <div id="divname" style="padding-top:15px;">
            <span class="label" style="position: relative;padding-top: 6px"><span id="warn">*</span><label for="realname">姓名:</label></span>
            <div class="t_right"><input id="realname" name="realname" maxlength="11"/><span id="realname_warn" class="warn" style="color: red;display: none;margin-left: 10px;"></span></div>
          </div>
      <div id="company" style="display: none;" class="company">
            <span class="label" style="position: relative;padding-top: 6px"><span id="warn">*</span><label for="organization">企业名称:</label></span>
          <div class="t_right"><input id="organization" name="organization" maxlength="30" /><span id="organization_warn" class="warn" style="color: red;display: none;margin-left: 10px;"></span></div>
      </div>
      <div style="padding-top:15px;">
            <span class="label" style="position: relative;padding-top: 6px"><span id="warn">*</span><label for="password">密码:</label></span>
          <div class="t_right" style="width: 800px"><input id="password" name="password" type="password" />
            <span id="password_warn" class="warn" style="color: red;display: none;margin-left: 10px;"></span>&nbsp;
              <label id="pswm" style="color: red;">请输入6-20位字符，可使用字母、数字或符号的组合</label>
              <img id="pwdlv_1" style="display: none;" src="../imgs/themes/pwdlv/s1.png"/>
              <img id="pwdlv_2" style="display: none;" src="../imgs/themes/pwdlv/s2.png"/>
              <img id="pwdlv_3" style="display: none;" src="../imgs/themes/pwdlv/s3.png"/>
              <img id="finish" style="display: none;" src="../imgs/themes/pwdlv/finish-icon.png"/>
          </div>
          <input id="lv" style="display: none;" >
      </div>
      <div style="padding-top:15px;">
          <san class="label" style="position: relative;padding-top: 6px"><span id="warn">*</span><label for="password2">确认密码:</label></span>
          <div class="t_right" style="width: 780px"><input id="password2" name="password2" type="password" /><span id="password2_warn" class="warn" style="color: red;display: none;margin-left: 10px;"></span></div>
      </div>
</form>

jquery validate的使用

标签：

原文地址：http://www.cnblogs.com/tangmj/p/5485591.html