下载并复制bootstrap验证css以及js到项目
创建自己的验证myValidater.js:
function validate(form) { var validateObj = { message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: {} }; // (数组, 方法(下标,对象){}); $.each(form.find("input"), function (i, item) { /* fields:{ userName: { message: '用户名验证失败', validators: { notEmpty: { message: '用户名不能为空' } } } } */ var obj = {}; //存放验证规则 obj.message = $(item).attr("name") + "必须填写"; var validators = { }; if (typeof ($(item).attr("myValidate")) == "undefined") { } else { var xiaoXi=$(item).parents("div.form-group").find("label").text(); //非空验证 if ($(item).attr("myValidate").indexOf("notEmpty") != -1) { validators.notEmpty = { message: xiaoXi+"不能为空" }; } //数字 if ($(item).attr("myValidate").indexOf("numeric") != -1) { validators.numeric = { message:xiaoXi+"必须是数字" }; } /* 长度 stringLength: { min: 6, max: 18, message: '用户名长度必须在6到18位之间' } */ if ($(item).attr("myValidate").indexOf("stringLength") != -1) { var str = $(item).attr("myValidate"); //2,10 var val = str.substring(str.indexOf("(", str.indexOf("stringLength")) + 1, str.indexOf(")", str.indexOf("stringLength"))); var stringLen = {}; stringLen["min"] = val.split(",")[0]; stringLen["max"] = val.split(",")[1]; stringLen.message =xiaoXi + "长度必须为" + val.split(",")[0] + "到" + val.split(",")[1] + "之间"; validators.stringLength = stringLen; } //长度必须几位 if ($(item).attr("myValidate").indexOf("size") != -1) { var str = $(item).attr("myValidate"); //2,10 var val = str.substring(str.indexOf("(", str.indexOf("size")) + 1, str.indexOf(")", str.indexOf("size"))); var stringLen = {}; stringLen["min"] = val; stringLen["max"] = val; stringLen.message =xiaoXi + "长度必须为" + val+ "位"; validators.stringLength = stringLen; } /* regexp: { regexp: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含大写、小写、数字和下划线' } */ if ($(item).attr("myValidate").indexOf("nameregexp") != -1) { var reg = {}; reg.regexp = /^[a-zA-Z0-9_\.]+$/; reg.message =xiaoXi+"必须为数字或者下划线,不能为特殊字符"; validators.regexp = reg; } /* 邮箱 * emailAddress: { message: '邮箱地址格式有误' } */ if ($(item).attr("myValidate").indexOf("email") != -1) { validators.emailAddress = { message: "电子邮箱地址不正确" }; } //网址 if ($(item).attr("myValidate").indexOf("uri") != -1) { validators.uri = { allowLocal: "true", message: "Uri地址格式不正确" }; } //两次输入的密码不一致 /* identical: { field: 'password', //需要进行比较的input name值 message: '两次密码不一致' } */ if ($(item).attr("myValidate").indexOf("identical") != -1) { var str = $(item).attr("myValidate"); var val = str.substring(str.indexOf("(", str.indexOf("identical")) + 1, str.indexOf(")", str.indexOf("identical"))); validators.identical = { field: val, message: '密码和重复密码不一致' }; } /* * 年龄 */ if ($(item).attr("myValidate").indexOf("ages") != -1) { var val = str.substring(str.indexOf("(", str.indexOf("ages")) + 1, str.indexOf(")", str.indexOf("ages"))); var stringLen = {}; stringLen["min"] = val.split(",")[0]; stringLen["max"] = val.split(",")[1]; var age = { lessThan: { value: stringLen[1], inclusive: true, message: '年龄最高'+stringLen[1] }, greaterThan: { value: stringLen[0], inclusive: false, message: '年龄最小'+stringLen[0] } }; validators.ages = age; } //remote ajax验证,验证是否存在 /* remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值,获得一个json数据。例表示正确:{"valid",true} url: 'exist2.do',//验证地址 message: '用户已存在',//提示消息 type: 'POST'//请求方式 /**自定义提交数据,默认值提交当前input value * data: function(validator) { return { password: $('[name="passwordNameAttributeInYourForm"]').val(), whatever: $('[name="whateverNameAttributeInYourForm"]').val() }; } */ // remote(地址.action, input=id=主键的值) 新增:员工登录名.action?empNo=0&empName=姓名 if ($(item).attr("myValidate").indexOf("remote") != -1) { var str = $(item).attr("myValidate"); var val = str.substring(str.indexOf("(", str.indexOf("remote")) + 1, str.indexOf(")", str.indexOf("remote"))); var arr=val.split(","); //向远程服务器发送的值 var cust_data={}; //主键如果有就取值,如果没有就为0 cust_data[arr[1]]=$("#"+arr[1]).val() || 0; //name="empName" cust_data[$(item).attr("name")]=$(item).val(); validators.remote = { type:'POST', url: arr[0], data:cust_data, message: xiaoXi+'已经存在!' }; } obj.validators = validators; validateObj.fields[$(item).attr("name")] = obj; } }) form.bootstrapValidator(validateObj); }
在页面中导入验证的css和js:
<!-- bootstrapvalidator的css --> <link href="${pageContext.request.contextPath }/static/plugins/bootstrapvalidator/bootstrapValidator.min.css" rel="stylesheet"><!-- bootstrapvalidator的js --> <script src="${pageContext.request.contextPath }/static/plugins/bootstrapvalidator/bootstrapValidator.min.js"></script> <script src="${pageContext.request.contextPath }/static/plugins/bootstrapvalidator/language/zh_CN.js"></script> <script src="${pageContext.request.contextPath }/static/plugins/bootstrapvalidator/myValidater.js"></script>
在input标签中:
<input type="text" id="startTime" name="startTime" myValidater="notEmpty" class="form-control form_datetime" placeholder="请选择日期" />
在javascript中:
<script type="text/javascript"> $(function(){ //bootstrapvalidator验证 validate( $("form") ); });
转自:https://www.cnblogs.com/by-1642146903/articles/7143596.html