表单校验
1、FA的文档 和 官方文档
一般的使用，看FA文档即可
https://doc.fastadmin.net/doc/179.html#toc-5
如果有更高级的用法，看官方文档
https://validator.niceue.com/docs/core-rules.html#section-1
2、当A字段不为空时，B字段必填
下拉框、文本框使用required(#c-a:filled)
单选框、复选框使用required(#c-a:checked)
另外当A字段可用时，B字段必填，required(#c-a:enabled)
3、动态设置表单里的字段的校验规则
例如：
A字段或B字段任意一个为空时，C字段提示必填
D字段的检验比较复杂，需要编写一段复杂前端的JS，并按不同的场景提示不同的提示语
D字段需要触发后端校验逻辑
A字段根据url的入参判断是否需要必填
JS里动态设置validator 校验，关键点：JS调用$('#edit-form').validator来设置校验规则。
html:
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">测试A:</label>
<div class="col-xs-12 col-sm-8">
<select name="testA" id="testA" class="form-control selectpicker">
<option value="">请选择...</option>
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Other</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">测试B:</label>
<div class="col-xs-12 col-sm-8">
<input id="testB" class="form-control" name="row[b]" >
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">测试C:</label>
<div class="col-xs-12 col-sm-8">
<input id="testC" class="form-control" name="row[c]" >
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">测试D:</label>
<div class="col-xs-12 col-sm-8">
<input id="testD" class="form-control" name="row[d]" >
</div>
</div>
js:
var diyRules ={};
$.extend(diyRules, {
myrule1: function (element) {
if ($("#testA").val() == "" || $("#testB").val() == "") {
$.extend(fieldsRules, {'row[c]': 'required; '});
}
//如果直接返回文本，则表示失败的提示文字
//如果返回true表示成功
//如果返回Ajax对象则表示远程验证
if (element.value.toString().match(/^\d+$/)) {
return '不能为纯数字';
}
if (!element.value.toString().match(/^[a-zA-Z0-9\-_]+$/)) {
return '请输入字母或数字组合';
}
return $.ajax({
url: 'ajax/check',
type: 'POST',
data: {id: $("#c-title").val(), name: element.name, value: element.value},
dataType: 'json'
});
},
myrule2: function (element) {
return $("#testA").val() == "" || $("#testB").val() == "";
}
} );
var fieldsRules ={};
//演示1：在js代码来设置字段验证规则
// $.extend(fieldsRules, {'row[b]': 'required;'});
// $.extend(fieldsRules, {'row[c]': 'required; '});
//演示2：在自定义一个规则，并使用此规则，提示信息可以自定义
$.extend(fieldsRules, {'row[d]': 'myrule1'});
//演示3：依赖其他字段的值来设置必填
$.extend(fieldsRules, {'row[c]': 'required(myrule2)'});
$('#add-form').validator({
fields: fieldsRules,
rules: diyRules})
以上使用$.extend()的好处是，可以实现动态合并fieldsRules，例如根据页面传入的url的值来判断是否要设置表单某个字段的必填规则。
几个特别要注意的
1、使用了js增加校验的能力，html里这些字段就不要增加data-rule="XX" 的字眼，data-rule都不要带上。否则校验就失效了。
2、如果是单选框的必填，不是使用required；而是使用checked
$('#post-form').validator({
fields: {
'row[axureversion]': 'checked; '
}})
5、如何调用后台接口校验
如果只是调用后端校验，使用remote(URL)
如果还有其他的个性化的，使用自定义校验+ajax请求后端
参考官方文档：https://doc.fastadmin.net/doc/179.html#toc-5
6、一组字段至少填写其中一个 required(form, .contact)
输入图片说明
7、如何更改提示的位置 html里 data-validator-option="{msgClass:'n-bottom'}"
输入图片说明
如何不改变require-form的方式实现呢？
输入图片说明
8、不小于0.5的小数