antdesignvue中的表单校验v-decorator
ant design vue 中的表单校验 v-decorator
1.v-decorator和v-model区别
v-decorator在我看来更加适合于有验证的操作，⽐如不为空，唯⼀值，只能是数字等等。⽽v-model更加适合⽤来定义⼀些组件返回的接收参数，更好处理和获取，以及⼀些默认隐藏或者不显⽰但保存或修改需要⽤到的参数。
2.v-decorator的⽤法
部分测试代码
<a-form-item label="name" :labelCol="labelCol" :wrapperCol="wrapperCol" class="x-form-item">
<a-input v-decorator="['name']" placeholder="请输⼊名字" @change="changeMe"></a-input>
</a-form-item>
<a-form-item label="id" :labelCol="labelCol" :wrapperCol="wrapperCol" class="x-form-item">
<a-input v-decorator="['id']" placeholder="请输⼊id"></a-input>
</a-form-item>
2.1 获取v-decorator的值
methods: {
changeMe(selectedValue) {
//selectedValue就是当前触发字段的值，也可以⽤下getFieldValue获取，但是有些组件好像获取在赋值前，可能需要加延迟
FieldValue('name')
input标签placeholder属性}
}
2.2 设置v-decorator的值
methods: {
changeMe(selectedValue) {
this.form.setFieldsValue({
name: "值",//
id: sult.id,//最后⼀个逗号随意
});
}
}
2.3 v-decorator在form表单的验证：
部分前端代码
<a-form-item label="名字" :labelCol="XTwoLabelCol" :wrapperCol="XTwoWrapperCol" class="x-form-item">
<a-input v-decorator="['name', validatorRules.name]" placeholder="请输⼊"></a-input>
</a-form-item>
<a-form-item label="数字" :labelCol="XTwoLabelCol" :wrapperCol="XTwoWrapperCol" class="x-form-item">
<a-input v-decorator="['number', validatorRules.number]" placeholder="请输⼊"></a-input>
</a-form-item>
验证：
return {
form: this.$ateForm(this),
validatorRules: {
name: {//name与v-decorator中属性对应
initialValue: "⽔",//初始化值，也就是默认值
rules: [
{ required: true, message: '请输⼊检验⽇期!'},//此处开启校验必填
{validator: (rule, value, callback) => validateDuplicateValue('em_project_info', 'project_name', value, del.id, callback)},//此处开启唯⼀验证，              { pattern: /^1[3456789]\d{9}$/, message: '请输⼊正确的⼿机号码!'},//此处配置正则表达式，⼿机号，可⾃⼰配置正则表达式
]
},
number: {//name与v-decorator中属性对应
rules: [
{ pattern: /^1[3456789]\d{9}$/, message: '请输⼊正确的⼿机号码!'},//此处配置正则表达式，⼿机号，可⾃⼰配置正则表达式
]
},
},
}
}
校验配置：
默认时间：
initialValue: moment(new Date()).format("YYYY-MM-DD"),//，此处⼀定要导⼊import moment from "moment";
必填：
rules: [
{ required: true, message: '请输⼊检验⽇期!'}
]
校验唯⼀值：
rules: [
{validator: (rule, value, callback) => validateDuplicateValue('表名', '验证唯⼀值的字段', value, del.id, callback)},
]
正则表达式验证：
rules: [
{ pattern: /^1[3456789]\d{9}$/, message: '请输⼊正确的⼿机号码!'},//pattern为正则表达式，message为提⽰信息，正则表达式可以根据⾃⼰需求来设置。此处注意在/正则表达式/。在俩斜杠之间位正则表达式。
]
2.4 JEditableTable的验证：
部分代码：此处包含唯⼀验证，必填验证，正则表达式验证
{
title:'名称',
align:"center",//居中显⽰
width: '280px',//宽度
ellipsis: true,
key: 'name',//字段名
type: FormTypes.input,//表⽰以input标签显⽰
placeholder: '请输⼊${title}',//提⽰信息
validateRules: [
{
required: true,//在前端设置此字段必填
message: '${title}不能为空',//在前端设置此字段不能为null，提⽰⽂本
// ⾃定义函数校验 handler，表单验证，此处为唯⼀性验证
handler(type, value, row, column, callback, target) {
//验证sampleName不能重复
let { values } = ValuesSync({ validate: false })
let count = 0
for (let val of values) {
if (val['name'] === value) {//什么字段就传什么参数，
if (++count >= 2) {
callback(false, '${title}不能重复')
return
}
}
}
callback(true) // true = 通过验证
}
}
],
},
{
title:'数量',
align:"center",
/
/dataIndex: 'number'
width: '140px',
ellipsis: true,
key: 'number',
type: FormTypes.input,
placeholder: '请输⼊${title}',
validateRules: [
{ pattern:  /^[1-9]\d*$/, message: '请输⼊正整数!'},//正则表达式验证，正整数
]
},
}
2.5 v-decorator的其他知识点
去空字符串
rules:[{validator:(rule, value, callback)=>validateDuplicateValue('表名','验证唯⼀值的字段', del.id, callback)},]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。