antd 表单的校验方式antd-design-vue form表单验证,禁止输入中文,只数字,等验证要怎么写呀~~以下是一段手机号的的自定义校验，在提交表单的时候form.validateFields总是出现错误，方法无法向下执行Vue+Antd表单校验form.validateFields执行错误的解决方法

159 阅读 0 评论 105 点赞

我是靠谱客的博主害羞羽毛，这篇文章主要介绍antd 表单的校验方式antd-design-vue form表单验证,禁止输入中文,只数字,等验证要怎么写呀~~以下是一段手机号的的自定义校验，在提交表单的时候form.validateFields总是出现错误，方法无法向下执行Vue+Antd表单校验form.validateFields执行错误的解决方法，现在分享给大家，希望可以做个参考。

antd 表单的两种校验方式

1.声明式表单验证：

<Form.Item

name="username"

rules={[

{

required: true,

message: 'Please input your Username!',

},

{

max: 20,

message: '最长20位!',

},

{

min: 5,

message: '至少5位!!',

}, {

pattern: /^[A-Za-zd_]+$/,

message: '自能包含字母数字下划线字符!',

},

]}

>

<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />

</Form.Item>

2. validator自定义式验证：

<Form.Item

name="password"

rules={[

{

validator: (_, value) =>{

if(value.length >= 6 && value.length<=10) {

return Promise.resolve()

}else{

return Promise.reject('密码长度必须是6~10位')

}

]}

>

<Input

prefix={<LockOutlined className="site-form-item-icon" />}

type="password"

placeholder="Password"

/>

</Form.Item>

antd-design-vue form表单验证,禁止输入中文,只数字,等验证要怎么写呀~~

因为是在表单里写的,所以有点迷,不知道要怎么写..
请大神给个思路~~~

复制代码

1
2
3
4
5
6
7
8
9
10
<a-form-item v-bind="formStyle" label="别名(英文)">
    <a-input
        placeholder="请输入别名"
        v-decorator="['menuPath', { rules: [
            { required: true, message: '请输入别名' },
            { validator: (rule, value, cb) => this.changeKey(rule, value, cb) }
        ] }]"
    />
</a-form-item>

把采纳给了楼下
我现在的解决办法如下: 感觉这样更方便点儿

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <a-form-item v-bind="formStyle" label="别名(英文)">
    <a-input
        placeholder="请输入别名"
        maxlength="50"
        minlength="3"
        v-decorator="['menuPath', { rules: [
            { required: true, message: '请输入别名' }
        ],
            getValueFromEvent: (event) => {
                return event.target.value.replace(/[u4E00-u9FA5]/g,'')
            }
         }]"
    />
</a-form-item>

以下是一段手机号的的自定义校验，在提交表单的时候form.validateFields总是出现错误，方法无法向下执行Vue+Antd表单校验form.validateFields执行错误的解决方法

在自定义校验里面每一个判断都要调用callback()，要保证方法最后执行到的永远都是callback()

//自定义校验（检查手机号是否输入正确）
checkPhone(rule, value, callback) {
if (value != null && value != "") {
var reg = /^1[3456789]d{9}$/;
if (!reg.test(value)) callback(new Error("手机号格式不正确"));
//调用callback
else callback();
} else {
callback();
}
}