register-验证

假设以下页面：

验证效果页面如下：

每个布局如下：

<div class="input-group" id="uName">
                            <div class="input-group-addon icon">
                            </div>
                            <input type="text" class="form-control" id="Name" placeholder="请输入用户名" minlength="6">
</div>
                        <p class="valiResult"></p>

我解释一下：

addon里面是图标
input为输入框，这里产品要求失去焦点进行验证
valiResult里面放的是验证结果

function Validate(el, rule) {
    this.el = $(el);
    this.value = $(el).val();
    this.length = this.value.length;
    this.onerr = this.el.parent().next();
    this.rule = rule;
    this.validate = this.rule.test(this.value);
}

还需要添加事件

function addValidate(el, event, rule, errMessage, fn) {
    var check = new Validate(el, rule);
    check.el.on(event, function () {
        var v = new Validate(el, rule);
        if (v.length < 6) {
            v.onerr.html(errMessage)
        } else {
            if (v.validate) {
                if (fn) {
                    fn()
                } else {
                    v.onerr.html("验证通过");
                }
            } else {
                v.onerr.html(errMessage);
            }
        }
    })
}

我来解释以下以上代码：

 - el是需要验证的元素
 - rule是验证规则
 - errMessage是验证失败的提示信息
 - fn是回调函数，如果前面验证规则更改、规则覆盖面不全，或者产品有其他要求，可以写在这里，这里不涉及ajax请求

举例来说：

用户名6-16位英文、数字的单一或组合字符串（11位纯数字不允许）

实现代码:

addValidate("#Name", "blur", /^[a-zA-Z0-9]{6,16}$/, "请输入正确的用户名，6-16位英文和数字", noPhone);

用户名、手机号的代码如下：

    //验证用户名
    addValidate("#Name", "blur", /^[a-zA-Z0-9]{6,16}$/, "请输入正确的用户名，6-16位英文和数字", noPhone);
    //验证手机号
    addValidate("#Phone", "blur", /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/, "请输入正确的手机号码");
    //验证密码
    addValidate("#Password", "blur", /^[a-zA-Z0-9_]{6,16}$/, "请输入6-16个英文与数字的组合", samePwd);
    //再次验证密码
    addValidate("#Pwd", "blur", /^[a-zA-Z0-9_]{6,16}$/, "两次输入不一致", samePwd);

这里的密码两次验证需要注意：

我发现：
用户可能输入密码后，再次输入密码时发现密码输错了，就会回去修改密码，所以两个都要有回调验证；这里最好做成输入时验证，而不是blur时验证；
不过产品要求失去焦点验证。。。

就先写到这里吧，我要去敲代码了