表单使用教程
<h5>1.表单校验示例相关代码</h5>
<p>css、js引入：</p>
<pre><code class="language-java"><link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script type="text/javascript" src="/js/bootstrap.min.js?v=3.3.6"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
</code></pre>
<p>html代码：</p>
<pre><code class="language-java"><form id="frm">
<div class="form-group">
<label>单行输入框</label>
<input type="text" class="form-control" name="txt1"
placeholder="请输入标题">
</div>
<div class="form-group">
<label>验证必填项</label>
<input type="text" class="form-control" name="txt2"
placeholder="请输入">
</div>
</form></code></pre>
<p>js代码：</p>
<pre><code class="language-java"><script>
$('#frm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
txt1:{
message:'',
validators:{
notEmpty: {
message: '标题内容不能为空'
},
stringLength: {
min: 2,
max: 18,
message: '标题内容长度必须在2到18位之间'
},
}
},
txt2:{
message:'验证必填项不能空',
validators:{
notEmpty: {
message: '验证必填项不能空'
}
}
},
}
});
</script></code></pre>
<h5>2.展现</h5>
<p><img src="https://www.showdoc.cc/server/api/attachment/visitfile/sign/265e96a6ae832e621a03b9f1c4bd68d4?showdoc=.jpg" alt="" /></p>
<h5>3.其他表单校验说明</h5>
<ul>
<li>
<p>用户名校验</p>
<pre><code>username: {
message: '用户名验证失败',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 18,
message: '用户名长度必须在6到18位之间'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '用户名只能包含大写、小写、数字和下划线'
}
}
},</code></pre>
</li>
<li>
<p>邮箱校验</p>
<pre><code>email: {
validators: {
notEmpty: {
message: '邮箱不能为空'
},
emailAddress: {
message: '邮箱地址格式有误'
}
}
},</code></pre>
</li>
<li>链接校验</li>
</ul>
<pre><code>link:{
essage: '链接不能为空',
validators: {
notEmpty: {
message: '链接不能为空'
},
regexp: {
regexp: /^((https|http|ftp|rtsp|mms)?:\/\/)+[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
message: '链接不符合规格'
}
}
},</code></pre>
<ul>
<li>身份证校验</li>
</ul>
<pre><code>idCode:{
validators: {
notEmpty: {
message: '身份证号码不能为空'
},
regexp: {
regexp: /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/,
message: '身份证号码不符合规格'
},
}
}</code></pre>
<h5>4.自定义处理校验</h5>
<p>增加callback回调函数：</p>
<pre><code>idCode:{
validators: {
callback: { /*自定义，可以在这里与其他输入项联动校验*/
message: 'IP格式错误',
callback: function(value, validator, $field) {
return isValidIP(value);
}
}
}
}</code></pre>
<p>适用场景：bootstrap的校验规则不满足需求，进行自定义处理规则；
异步后端校验用户名是否已存在数据库中等。</p>
<h5>5.表单提交</h5>
<p>html（提交按钮）</p>
<pre><code><button type="submit" name="submit" class="btn btn-primary" id="submitBtn">提交</button></code></pre>
<p>js:</p>
<pre><code>$('#submitBtn').click(function(e) {
$('#form').bootstrapValidator('validate');
var data=$('#frm').serialize();
// 其他处理，如Ajax提交数据
$.ajax({
url: "admin/check_login", // 提交到controller的url路径
type: "post", // 提交方式
data: {"username": username, "password": password}, // data为String类型，必须为 Key/Value 格式。
dataType: "json", // 服务器端返回的数据类型
success: function (data) { // 请求成功后的回调函数，其中的参数data为controller返回的map,也就是说,@ResponseBody将返回的map转化为JSON格式的数据，然后通过data这个参数取JSON数据中的值
if (data.message == "success") {
//跳转到系统首页
......
} else {
......
}
},
});
});</code></pre>
<h5>6.表单重置</h5>
<p>html（按钮）</p>
<pre><code><button id="reset" type="reset" name="reset" class="btn btn-primary" id="resetBtn">重置</button></code></pre>
<p>js：</p>
<pre><code>$(function() {
$("#reset").click(function(){
$("#frm").data("bootstrapValidator").resetForm();
});
});</code></pre>