您的位置:首页 > 其它

validator 使用案例

2016-03-24 23:27 190 查看
/*表单验证*/
.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;  }
.n-right {  position: absolute;  top: .3rem;  right: 0;  }

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$('#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) {

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: