Flask接口签名sign原理与实例代码浅析
208
2023-06-21
bootstrapValidator表单验证插件学习
bootstrapValidator表单验证插件学习
本文实例为大家分享了bootstrapValidator表单验证的具体代码，供大家参考，具体内容如下
1.页面引入css、js
2.页面表单
是
否
是
否
是
否
是
否
是
否
3.js初始化验证
//验证表单
var validatorForm = {
//验证规则
validatorReuls:function(){
$("#detailForm").bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userName:{
validators: {
notEmpty: {
message: '用户名不能为空'
},
remote: {////ajax验证。服务器端返回的 result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: contextPath+"/sysUser/username",
type:"GET",
data: function(validator) {
var x_={
userName: validator.getFieldElements('userName').val()
};
return x_;
},
message: '用户名已注册，请重新输入'
}
}
},
email: {
validators: {
notEmpty: {
message: '邮箱不能为空'
},
regexp: {//正则表达式
regexp: Regex.email,
message: '邮箱地址格式不正确'
}
}
}
,userPassword: {
validators: {
notEmpty: {
message: '密码不能为空'
},
regexp: {
regexp: Regex.password_6_18,
message: '密码只能输入6-18个字母、数字、下划线 '
}
}
}
}
});
},
//验证表单
validate: function(formId){
$('#'+formId).data('bootstrapValidator').validate();
},
//验证表单是否通过验证
isValid : function(formId){
return $('#'+formId).data('bootstrapValidator').isValid()
},
//清空表单验证
clearValidate : function(formId){
$('#'+formId).bootstrapValidator('resetForm');
}
}
4.最后呈现的效果
bootstrapValidator官网：bootstapValidator
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
暂时没有评论，来抢沙发吧~