niec-validator 表单验证使用案例

css

 .msg-box span {  font-size: .5rem;  color: #7699c6;  }
 .msg-box .tip {  padding-left: 18px;  background: url("../images/validator_jing.png") no-repeat 0 0;  }
 .msg-box .error {  padding-left: 18px;  background: url("../images/validator_cuo.png") no-repeat 0 0;  color: red;  }
 .msg-box .ok {  padding-left: 18px;  background: url("../images/validator_wan.png") no-repeat 0 0;  color: red;  }
 ;  }

自定义DOM规则

 $('#orderForm').validator({
     focusCleanup: true, stopOnError: false, timely: 2, invalidClass: 'n-invalid',
     //全局规则
     rules: {
         site: [/^[a-zA-Z0-9\u0391-\uFFE5]+$/, "请输入有效地址"],
         chinese: [/^[a-zA-Z\u0391-\uFFE5]+$/, "请填写中文字符、字母"],
         telmobile: [/^1[3-9]\d{9}$/, '请填写11位有效的手机号'],
         orderamount: [/^[0-9]{1,}$/, '请填写正确的1位以上有效数字']
     },
     fields: {
         "address": {
             rule: "required;site", tip: "输入你的详细地址。", ok: " ", msg: {required: "你的详细地址必填!"}
         },
         "consignee": {
             rule: "required;chinese", tip: "输入你的名字与姓氏。", ok: " ", msg: {required: "姓名必填!"}
         },
         "mobile": {
             rule: "required;telmobile;", tip: "请输入您的手机号码。", ok: " ", msg: {required: "手机号码必填!"}
         },
         "order_amount": {
             rule: "required;orderamount;", tip: "请输入您的意向价格。", ok: " ", msg: {required: "您的意向价格必填!"}
         },
         "goodsDesc": {
             rule: "required;", tip: "请输入您的商品描述信息,最多不能超过140字。", ok: " ", msg: {required: "商品描述信息必填!"}
         },
         "delivery_date": {
             rule: "required;", ok: " ", msg: {required: "您的日期或者时间必填!"}
         }
     },
     //自定义消息显示
     msgMaker: function (opt) {
         return '<span class="' + opt.type + '">' + opt.msg + '</span>';
     },
     //表单通过时调用
     valid: function (form) {
         $.post(".php", $(form).serialize()).done(function (d) {

         });
     },
     //表单不通过时调用
     invalid: function (form, errors) {

     }