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和radio | checked |
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格式 | ||
url | 必须为URL链接 | url |
必须为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官方教程