jQuery Validate表单验证插件

创建时间：2017-09-26

默认校验规则

(1)、required:true 必输字段

(2)、remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值

(3)、email:true 必须输入正确格式的电子邮件

(4)、url:true 必须输入正确格式的网址

(5)、date:true 必须输入正确格式的日期，日期校验ie6出错，慎用

(6)、dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性

(7)、number:true 必须输入合法的数字(负数，小数)

(8)、digits:true 必须输入整数

(9)、creditcard:true 必须输入合法的信用卡号

(10)、equalTo:"#password" 输入值必须和#password相同

(11)、accept: 输入拥有合法后缀名的字符串（上传文件的后缀）

(12)、maxlength:5 输入长度最多是5的字符串(汉字算一个字符)

(13)、minlength:10 输入长度最小是10的字符串(汉字算一个字符)

(14)、rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)

(15)、range:[5,10] 输入值必须介于 5 和 10 之间

(16)、max:5 输入值不能大于5

(17)、min:10 输入值不能小于10

CSS

#upForm{width:380px;margin:100px auto;}
#upForm input{width:98%;border: 1px solid #ccc;border-radius: 5px;padding: 5px 1%;line-height: 22px;}
#upForm .div{margin-bottom: 20px;}
#upForm .div-1{margin-bottom: 8px;color: #555;}
#upForm .but{text-align: center;margin-top: 30px;}
#upForm button{border: 0;background: #555;color: #fff;border-radius: 3px;font-size: 16px;width: 100%;line-height: 30px;padding: 5px;}
#upForm .error{color: #c00;}

HTML

<form  id="upForm" method="get" action="">
    <div class="div">
        <div class='div-1'>你的姓名：</div>
        <div class='div-2'><input type="text" name="name"></div>
    </div>
    <div class="div">
        <div class='div-1'>输入密码：</div>
        <div class='div-2'><input type="text" name="pass" id="pass"></div>
    </div>
    <div class="div">
        <div class='div-1'>确认密码：</div>
        <div class='div-2'><input type="text" name="eqpass"></div>
    </div>
    <div class="div">
        <div class='div-1'>手机手机：</div>
        <div class='div-2'><input type="text" name="phone"></div>
    </div>
    <div class='but'><button>提交信息</button></div>
</form>

JavaScript

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script><!-- 引入jquery -->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script><!-- 引入表单验证插件 -->
<script type="text/javascript">
    //汉化提示信息
    $.extend($.validator.messages, {
        required: "必选字段",
        remote: "请修正该字段",
        email: "请输入正确格式的电子邮件",
        url: "请输入合法的网址",
        date: "请输入合法的日期",
        dateISO: "请输入合法的日期 (ISO).",
        number: "请输入合法的数字",
        digits: "只能输入整数",
        creditcard: "请输入合法的信用卡号",
        equalTo: "请再次输入相同的值",
        accept: "请输入拥有合法后缀名的字符串",
        maxlength: $.validator.format("请输入一个长度最多是 {0} 的字符串"),
        minlength: $.validator.format("请输入一个长度最少是 {0} 的字符串"),
        rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
        range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
        max: $.validator.format("请输入一个最大为 {0} 的值"),
        min: $.validator.format("请输入一个最小为 {0} 的值")
    });

    /**
     * 自定义校验规则
     * */

    // 手机号码验证
    jQuery.validator.addMethod("isMobile", function(value, element) {
        var length = value.length;
        var regPhone = /^1([3578]\d|4[57])\d{8}$/;
        return this.optional(element) || ( length == 11 && regPhone.test( value ) );
    }, "请正确填写您的手机号码");

    //检测用户姓名是否为汉字
    jQuery.validator.addMethod("isChar", function(value, element) {
        var length = value.length;
        var regName = /[^\u4e00-\u9fa5]/g;
        return this.optional(element) || !regName.test( value );
    }, "请正确格式的姓名(暂支持汉字)");

    //检测邮政编码
    jQuery.validator.addMethod("isZipCode", function(value, element) {
        var tel = /^[0-9]{6}$/;
        return this.optional(element) || (tel.test(value));
    }, "请正确填写您的邮政编码");

    //活动预定表单提交
    $().ready(function() {
        $("#upForm").validate({
            //需要验证的表单名称
            rules: {
                name: "required",//必填
                phone:{
                    required:true,//必填
                    minlength:11,//最小11位
                    maxlength:11,//最大11位
                    isMobile:true//自定义手机号码验证
                },
                pass:'required',
                eqpass:{
                    required:true,
                    equalTo:"#pass"
                },
                yzm:{
                    required:true,//必填,
                    remote:{
                        url: "{:url('login/check_form')}",
                        type:'post',
                        data:{
                            new_stuID:function(){
                                return $(".yzm").val();
                            }
                        }
                    }

                }
            },
            //验证表单的提示信息
            messages: {
                name:'请输入你的姓名',
                phone: {
                    required:"请输入您的手机号码",
                    isMobile:"请填写11位的手机号码!"
                },
                pass:'请输入密码',
                eqpass:{
                    required:"请输入确认密码",
                    equalTo:"密码不一致!"
                },
                yzm:{
                    required:"请输入验证码",
                    remote:"验证码有误"
                }
            },
            //ajax提交
            submitHandler:function(){
                var arr = $("#upForm").serialize();
                $.post('test.php',arr,function(msg){
                    console.log(msg);
                })
            }
        });
    });
</script>

后台

    //校验表单
    public function check_form(){
        $new_stuID = $_POST['new_stuID'];
        //我试着返回布尔型的true和false但是均不成功，string型的就可以
        if($new_stuID == '1234567'){
            echo 'true';
        }else{
            echo 'false';
        }
    }

上一篇：Jquery常用工具函数

下一篇：PHP输出隔行换色的列表