表单验证

FastAdmin的表单验证采用的是Nice-validator验证插件,Nice-validator是一款非常强大的表单验证插件,通过简单在元素上配置规则,即可达到验证的效果。

常规示例

在FastAdmin当中我们只需要给元素添加data-rule="规则"即可开启Nice-validator的验证,如下:

<input id="c-title" class="form-control" data-rule="required;username" name="row[title]" type="text" value="" />

常用规则

常用的规则如下

规则描述示例
required字段必填required
checked必选,只适用于checkbox和radiochecked
match(name)当前字段值必须和 name 字段的值匹配match('row[username]')
remote(URL)请求服务端验证remote('validate/check_username_unique')
integer整数integer
range(n~)数值范围, 请填写不小于 n 的数range(3~)
length(n)请填写 n 个字符length(3)
filter过滤 <>`"' 和字符实体编码的字符filter
digits必须为数字digits
letters必须为字母letters
date必须为日期,yyyy-mm-dd格式date
time必须为时间,hh:ii格式time
email必须为email格式email
url必须为URL链接url
qq必须为QQ号qq
IDcard必须为身份证号码IDcard
tel必须为电话号码tel
mobile必须为手机号码mobile
zipcode必须为邮编zipcode
chinese必须为中文字符chinese
username必须为3-12位数字、字母、下划线username
password必须为6-16位字符,不能有空格password

自定义规则

如果常用规则不满足我们的需求,我们可以采用自定义规则来实现,如下:

<input id="c-title" class="form-control" data-rule="required;diyname" name="row[title]" type="text" value="" />

然后我们在JS中定义规则的实现方法,如下:

$.validator.config({
    rules: {
        diyname: function (element) {
            //如果直接返回文本,则表示失败的提示文字
            //如果返回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'
            });
        }
    }
});

然后我们需要在服务端控制器的check方法返回

$result = "验证结果";
if ($result) {
    //失败
    $this->error("用户名已经存在");
} else {
    //成功
    $this->success();
}

忽略验证

因为引入了Nice-validator后会对所有表单的所有元素进行验证,如果你的表单不希望使用Nice-validator组件进行验证,可以给form添加一个novalidate属性即可,如

<form novalidate>
    ......
</form>

同时如果JS中有使用Form.api.bindevent($("form[role=form]"));,也需要将该行移除。

温馨提示

更多的使用方法请参考Nice-validator官方教程
文档最后更新时间:2023-07-31 08:12:06
著作权归应用插件开发者所有,未经许可,禁止转载、复制此文档的任何内容。