BVのフォームの検証について、同社では、との接触に入って来たその強力なを理解するようになりました。
現在、同社は多くのBaiduの、そう整頓、使用しているが、断片化され、不完全、またはいくつかのピット。
首先第一步：引入jsの和CSS
<リンクのhref = "https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css"のrel = "スタイルシート">
<リンクのhref = "https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" REL = "スタイルシート">
<スクリプトSRC = "$ {}のcontextPath /resource/js/jquery-3.1 .1.js "> </ SCRIPT>
<SCRIPT SRC =" https://cdn.bootcss.com/twitter-bootstrap/4.1.2/js/bootstrap.min.js "> </ SCRIPT>
<スクリプトSRC = "https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"> </ SCRIPT>
bootstrapValidator依存ブートストラップはjqueryのを頼ります
次のJSPページのフォーム
<form action="" method="post" class="phone_registration" id="register">
<div class="username form-group">
<img src="${contextPath }/resource/img/login/phone.png" />
<input type="text" name="phone" id="phone" class="form-control" maxlength="11" οnkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="请输入手机号" />
</div>
<div class="code form-group">
<div class="code_main">
<img src="${contextPath }/resource/img/login/code.png" />
<input type="text" name="code" id="code" class="form-control" maxlength="4" οnkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="请输入验证码" />
</div>
<span>发送验证码</span>
</div>
<div class="password form-group">
<img src="${contextPath }/resource/img/login/password.png" />
<input type="password" name="password" id="password" class="form-control" maxlength="20" οnkeydοwn="if(event.keyCode==32) return false" placeholder="请输入密码" />
</div>
<div class="password form-group">
<img src="${contextPath }/resource/img/login/password.png" />
<input type="password" name="repassword" id="repassword" class="form-control" maxlength="20" οnkeydοwn="if(event.keyCode==32) return false" placeholder="请确认密码" />
</div>
<div class="form-group">
<button type="submit" name="submit" id="register_btn" class="btn btn-primary register">登录</button>
</div>
</form>上記フォーム登録ページには、電話番号、コード、パスワード、繰り返しパスワードが含まれています
以下は、対応するJSです
$('#register').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
phone: {
message: '手机号校验失败!',
verbose:false,
validators: {
notEmpty: {
message: '手机号不能为空'
},regexp: {
regexp: /^1(3|4|5|6|7|8)\d{9}$/,
message: '手机号不合法'
},stringLength: {
min: 11,
max: 11,
message: '手机号长度必须为11位'
},threshold:11 , //有11字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，11字符以上才开始）
remote: {//ajax验证。{"valid":true} 服务器返回值必须是这种 否则识别不了
url: contextPath+'/login/checkPhone',//验证地址
message: '手机号已被注册',//提示消息
delay : 1,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置1秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST',//请求方式
/**自定义提交数据，默认值提交当前input value*/
data:function(validator){
return {
phone:$('[name="phone"]').val()
};
},
}
}
},
code: {
message: '验证码输入错误',
verbose:false,
validators: {
notEmpty: {
message: '手机验证码不能为空'
},regexp: {
regexp: /^\d{4}$/,
message: '手机验证码只能是4位数字'
}
}
},password: {
message: '密码验证失败',
verbose:false,
validators: {
notEmpty: {
message: '密码不能为空'
},regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '密码只能包含大写、小写、数字和下划线'
},stringLength: {
min: 6,
max: 20,
message: '密码长度必须在6到20位之间'
}
}
},
repassword: {
message: '密码输入错误！',
verbose:false,
validators: {
notEmpty: {
message: '密码不能为空'
},regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '密码只能包含大写、小写、数字和下划线'
},stringLength: {
min: 6,
max: 20,
message: '密码长度必须在6到20位之间'
},identical: {
field: 'password',
message: '两次密码必须保持一致'
}
}
}
}
}).on('success.form.bv', function (e) {
e.preventDefault();
var toURL = $("#toURL").val();
//判断记住密码是否选中
if($("input[name='remeberme']").is(':checked')==true){
console.log("提交表单并记住密码》》");
saveInfo();//选中的话那么浏览器就记住密码了;
}
$.ajax({
url: contextPath+"/login/login",
dataType:"json",
type: "POST",
data: {"loginname":$('#loginname').val(),"loginpwd":$('#loginpwd').val()},
success: function(data){
if(data.code == 0){
layui.use('layer',function () {
layer.msg('登录成功！');
})
if(toURL != null && toURL != '' && toURL != undefined && toURL != 'undefined'){
window.location.href = decodeURIComponent(toURL);
}else{
window.location.href = contextPath+"/main/homePage";
}
}else if(data.code == 2){//登录失败
layui.use('layer',function () {
layer.msg('由于您登陆失败次数过多，请于一小时后登陆');
})
}else{
if(data.obj.remainTimes > 0){
$('#login').bootstrapValidator('disableSubmitButtons', false);
}
layui.use('layer',function () {
layer.msg('用户名或密码错误,一小时内您还有'+data.obj.remainTimes+'次登陆次数');
})
}
}
})
});
$('#loginname').focus();
GetCookie();
})
または{「有効」：偽}：背景には、リモートリモート認証は、{真の「有効」} Stringを返す必要があります
冗長：検証が渡されていない偽の、各入力シーケンスの検証は、その後、次の検証は行っていません、エラーメッセージのみを表示します
同一：{
フィールド：「パスワード」、//名前の他の入力
メッセージ：「二つのパスワードが一致していなければなりません」
}
両方のパスワードが同じであることを確認します
上記のように完璧なので、その後、仕事の後、忙しいべき仕事がある簡単な要約であり、ご質問がある場合は、してください接触[email protected]
