jquery validate 表单验证

validate是一个jquery的插件的表单验证工具

详细了解点击这里

这里我详细给大家讲解一下他的常规用法

首先我们要有一个普通的表单

<form id="test" action="{{rootUrl}}insert_user" method="POST">
    <div>
        <div>用户名：<input type="text" name="username" id="username" /> </div>
        <div class="error"></div>
    </div>
    <div>
        <div>密码：<input type="password" name="password" id="password" /> </div>
        <div class="error"></div>
    </div>
    <div>
        <div>重复密码<input type="password" name="re_password" id="re_username" /> </div>
        <div class="error"></div>
    </div>
    <input class="submit" type="submit" value="Submit"/>
</form>

    $("#test").validate({
        rules: {//rules 主要表示每个input需要满足那些规则，每个input可以同时满足几个规则 可选 
            username: {
                required: true,
                email: true
            },
            password: {
                required: true
            },
            re_password: {
                required: true
            },
            equalTo: '#password'

        },
        messages: {//messages与rules相对应，如果你需要对某些错误提示定制，可以在这里设置 可选 
            username: {
                required: "用户名不能为空",
                email: "格式不正确"
            },
            password: {
                required: "密码不能为空"
            },
            re_password: {
                required: "重复密码不能为空"
            }
        },
        errorPlacement: function(err, el) { //errorPalacement表示错误提示出现的位置，如果不设置错误会在出错误的input之后append一个label 可选 
            par = el.parent().parent().find(".error");
            par.empty();
            err.appendTo(par);
        },
        errorElement: "span", //用来规定错误以什么标签显示，默认为lable 可选 
        submitHandler: function(form) { //用来提交表单 ，及处理返回结果。 必选 
            alert('我是在表单提交之前显示出来的');
            $(form).ajaxSubmit({
                success: function(responseText, statusText) {
                    var data = eval("(" + responseText + ")");
                    if (data.res === true) {
                        alert('注册成功');
                    } else {
                        alert('注册失败');
                    }
                }
            });
        }
    });

上面就是一个validate的常规写法，下面我详细介绍一些细节

首先我介绍几种常用的rules

requre

required: true

表示为必填

email

email: true

格式必须为邮箱

remote

remote: "{{rootUrl}}user/check_mail"

$email = $_GET("email");
$res = True;
$result = UserUtil::check_passname($email); //此函数用来检测传入的值在数据库中是否存在，存在返回false否则返回true
if ($result == false) {
    $res = "邮箱已存在，请重新填写";
}
echo json_encode($res);

equalTo

 equalTo: '#password'

number

number:true

min:0

max:10

url: true

    function isChinese(str) { //判断格式否为中文
        var lst = /[u00-uFF]/;
        return !lst.test(str);
    }
    function strlen(str) {
        var strlength = 0;
        for (i = 0; i < str.length; i++) {
            if (isChinese(str.charAt(i)) == true)  //如果是中文算两个字符串长度
                strlength = strlength + 2;
            else
                strlength = strlength + 1;
        }
        return strlength;
    }
    size = function(value, element) { //定义一个规则，传入要检测的值value，结果返回true或者false
        if (strlen(value) >= 2 && strlen(value) <= 16) {
            return true;
        }
    }
    $.validator.addMethod("size", size, "长度必须在2-16字符之间"); //将规则绑定到关键字上，并绑定提示

正整数

positiveinteger = function(value, element) {
        var aint = parseInt(value);
        return aint > 0 && (aint + "") == value;
    }

数字字母，支持中文

    format = function(value, element) {
        //var reg = /^\D.*$/;
        var reg = /^\D[\u4E00-\u9FA5|\u3041-\u30FE|\uFF00-\uFFFF|\w-\/.]*$/
        return reg.exec(value);
    }

    function isspecial(str) {
        var lst = /.*[!@#$^&*()=|{}':;',\[\].<>].*/;
        return !lst.test(str);
    }