最近在做一个表单前台验证,由于自己的js是弱项,网上找到了一个不错的表单验证,功能非常完善,先截张图看看,可使用dom验证或者加入js来验证,主机名和mac全部做了异步验证,查看数据库是否有此数据

window.$ && $(function(){
//验证初始化
$('#signupForm').validator({
    //stopOnError:true,
    //timely: 2,
	theme: "yellow_right_effect",
    showOk: "",
    //自定义规则(PS:建议尽量在全局配置中定义规则,统一管理)
    rules: {
        check_node: [/^((l|i)-){0,1}(n-[a-z0-9]+|[a-z0-9]{1,10}\.[a-z0-9]{1,10}\.({% for i in Environment %}{% if forloop.last %}{{ i }}{% else %}{{ i }}|{% endif %}{% endfor %}))\.(({% for i in idc %}{% if forloop.last %}{{ i }}{% else %}{{ i }}|{% endif %}{% endfor %})\.)(jumei.com|jumei.com.)+$/, '主机名不正确'],
        check_mac: [/^([0-9A-Fa-f]{2})(-[0-9A-Fa-f]{2}){5}|([0-9A-Fa-f]{2})(:[0-9A-Fa-f]{2}){5}$/, 'MAC不正确'] //验证mac
    },
    fields: {
        "node_name": {
            rule: "required;check_node;remote[/assets/select, node_name, csrfmiddlewaretoken]",
            tip: "输入主机名",
            ok: "",
            msg: {required: "主机名必须填写!"},
            data: {'data-ok':"主机名可以使用", 'data-msg-required': '主机名已正确'}
        },
        "mac": {
            rule: "required;check_mac",
            tip: "输入MAC",
            ok: "",
            msg: {required: "MAC必须填写!"}
        }
    }
});

});
//代码高亮
window.highlight && highlight();

dom型验证就更加简单了,直接在表单里面写你要验证的方法和返回的top及错误信息

<input type="password" name="demo"
data-rule="required; password"
data-rule-password="[/^\d{6}$/, '请填写6位数字']"
data-msg-required="请填写密码"
data-tip="密码由6位数字组成"
data-ok="别担心,稍后您还可以更改"
data-target="#msg_holder"
>

 

QQ截图20140120090119

更多方法请参考字方手册
http://niceue.com/validator/demo/

一月 20th, 2014

Posted In: 网络技术

无觅相关文章插件,快速提升流量