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) { }