表单校验

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的小数