2023年6月21日发(作者：)

bootstrap+te表单校验⽤户注册和登录其实往往⽐我们想象的难。就⽐如表单校验，⾥⾯涵盖的内容其实挺多，就前台⽽⾔，你需要了解：1.正则表达式的基本了解其实正则并不难，并且在学会后能带给你极⼤的成就感，享受那种事半功倍的效果吧。异步请求在验证⽤户名是否存在、⽤户登录时账号或者密码错误时给出相应的提⽰。3.⼀些⽅便的验证库，⽐如te正因为如此普遍的需求和⼀定的复杂性，bootstrap表单和te表单校验等⼀些优秀的类库专为⼈们解决UI、表单校验问题。te ⾃定义校验⽅法⾃定义校验⽅法// ⼿机号码验证hod("isPhone", function(value, element) { var length = ; return al(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+d{8})$/.test(value));}, "请正确填写您的⼿机号码。");调⽤⾃定义校验rules : { phone : { required : true, isPhone : true }}⾃定义错误显⽰参数errorClasserrorElementerrorPlacementsuccesshighlight类型StringStringfunction

function描述指定错误提⽰的 css 类名，可以⾃定义错误提⽰的样式。⽤什么标签标记错误，默认是 label，可以改成 em。跟⼀个函数，可以⾃定义错误放到哪⾥。要验证的元素通过验证后的动作，如果跟⼀个字符串，会当作⼀个 css 类，也可跟⼀个函数。可以给未通过验证的元素加效果、闪烁等。默认值"error""label"input元素之后⽆⽆

注册

⽤户注册

$(document).ready(function() { // ⼿机号码验证 hod("isPhone", function(value, element) { var length = ; return al(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+d{8})$/.test(value)); }, "请正确填写您的⼿机号码。");

// 电话号码验证 hod("isTel", function(value, element) { var tel = /^(d{3,4}-)?d{7,8}$/g; // 区号－3、4位 号码－7、8位 return al(element) || ((value)); }, "请正确填写您的电话号码。"); // 匹配密码，以字母开头，长度在6-12之间，必须包含数字和特殊字符。 hod("isPwd", function(value, element) { var str = value; if ( < 6 || > 18) return false; if (!/^[a-zA-Z]/.test(str)) return false; if (!/[0-9]/.test(str)) return fasle; return al(element) || /[^A-Za-z0-9]/.test(str); }, "以字母开头，长度在6-12之间，必须包含数字和特殊字符。");

$("#register-form").validate({ errorElement : 'span', errorClass : 'help-block',

rules : { firstname : "required", email : { required : true, email : true }, password : { required : true, isPwd : true }, confirm_password : { required : true, isPwd : true, equalTo : "#password" }, phone : { required : true, isPhone : true }, tel : { isTel : true }, address : { minlength : 10 } }, messages : { messages : { firstname : "请输⼊姓名", email : { required : "请输⼊Email地址", email : "请输⼊正确的email地址" }, password : { required : "请输⼊密码", minlength : ("密码不能⼩于{0}个字 符") }, confirm_password : { required : "请输⼊确认密码", minlength : "确认密码不能⼩于5个字符", equalTo : "两次输⼊密码不⼀致不⼀致" }, phone : { required : "请输⼊⼿机号码" }, tel : { required : "请输⼊座机号码" }, address : { required : "请输⼊家庭地址", minlength : ("家庭地址不能少于{0}个字符") } }, //⾃定义错误消息放到哪⾥ errorPlacement : function(error, element) { ().remove();//删除显⽰图标 (''); t('.form-group').append(error);//显⽰错误消息提⽰ }, //给未通过验证的元素进⾏处理 highlight : function(element) { $(element).closest('.form-group').addClass('has-error has-feedback'); }, //验证通过的处理 success : function(label) { var el=t('.form-group').find("input"); ().remove();//与errorPlacement相似 (''); t('.form-group').removeClass('has-error').addClass("has-feedback has-success"); (); },

});});

2023年6月21日发(作者：)

bootstrap+te表单校验⽤户注册和登录其实往往⽐我们想象的难。就⽐如表单校验，⾥⾯涵盖的内容其实挺多，就前台⽽⾔，你需要了解：1.正则表达式的基本了解其实正则并不难，并且在学会后能带给你极⼤的成就感，享受那种事半功倍的效果吧。异步请求在验证⽤户名是否存在、⽤户登录时账号或者密码错误时给出相应的提⽰。3.⼀些⽅便的验证库，⽐如te正因为如此普遍的需求和⼀定的复杂性，bootstrap表单和te表单校验等⼀些优秀的类库专为⼈们解决UI、表单校验问题。te ⾃定义校验⽅法⾃定义校验⽅法// ⼿机号码验证hod("isPhone", function(value, element) { var length = ; return al(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+d{8})$/.test(value));}, "请正确填写您的⼿机号码。");调⽤⾃定义校验rules : { phone : { required : true, isPhone : true }}⾃定义错误显⽰参数errorClasserrorElementerrorPlacementsuccesshighlight类型StringStringfunction

function描述指定错误提⽰的 css 类名，可以⾃定义错误提⽰的样式。⽤什么标签标记错误，默认是 label，可以改成 em。跟⼀个函数，可以⾃定义错误放到哪⾥。要验证的元素通过验证后的动作，如果跟⼀个字符串，会当作⼀个 css 类，也可跟⼀个函数。可以给未通过验证的元素加效果、闪烁等。默认值"error""label"input元素之后⽆⽆

注册

⽤户注册

$(document).ready(function() { // ⼿机号码验证 hod("isPhone", function(value, element) { var length = ; return al(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+d{8})$/.test(value)); }, "请正确填写您的⼿机号码。");

// 电话号码验证 hod("isTel", function(value, element) { var tel = /^(d{3,4}-)?d{7,8}$/g; // 区号－3、4位 号码－7、8位 return al(element) || ((value)); }, "请正确填写您的电话号码。"); // 匹配密码，以字母开头，长度在6-12之间，必须包含数字和特殊字符。 hod("isPwd", function(value, element) { var str = value; if ( < 6 || > 18) return false; if (!/^[a-zA-Z]/.test(str)) return false; if (!/[0-9]/.test(str)) return fasle; return al(element) || /[^A-Za-z0-9]/.test(str); }, "以字母开头，长度在6-12之间，必须包含数字和特殊字符。");

$("#register-form").validate({ errorElement : 'span', errorClass : 'help-block',

rules : { firstname : "required", email : { required : true, email : true }, password : { required : true, isPwd : true }, confirm_password : { required : true, isPwd : true, equalTo : "#password" }, phone : { required : true, isPhone : true }, tel : { isTel : true }, address : { minlength : 10 } }, messages : { messages : { firstname : "请输⼊姓名", email : { required : "请输⼊Email地址", email : "请输⼊正确的email地址" }, password : { required : "请输⼊密码", minlength : ("密码不能⼩于{0}个字 符") }, confirm_password : { required : "请输⼊确认密码", minlength : "确认密码不能⼩于5个字符", equalTo : "两次输⼊密码不⼀致不⼀致" }, phone : { required : "请输⼊⼿机号码" }, tel : { required : "请输⼊座机号码" }, address : { required : "请输⼊家庭地址", minlength : ("家庭地址不能少于{0}个字符") } }, //⾃定义错误消息放到哪⾥ errorPlacement : function(error, element) { ().remove();//删除显⽰图标 (''); t('.form-group').append(error);//显⽰错误消息提⽰ }, //给未通过验证的元素进⾏处理 highlight : function(element) { $(element).closest('.form-group').addClass('has-error has-feedback'); }, //验证通过的处理 success : function(label) { var el=t('.form-group').find("input"); ().remove();//与errorPlacement相似 (''); t('.form-group').removeClass('has-error').addClass("has-feedback has-success"); (); },

});});