前言:ant-vue中fom表单使用与校验
注意:表单域中必须用 <a-form :form="form"> 表单域 </a-form>
包裹,且必须要注册form
vue中template标签内
<a-row>
<a-col :span="12">
<a-form-item label="label名称" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15 }">
<a-input placeholder="请输入label名称" v-decorator="[ ‘firephone‘,validatorRules.firephone ]" />
</a-form-item>
</a-col>
</a-row>
校验规则写在 data函数内部 与return同级
// 手机号 座机号 校验规则
let limitphone = (rule,value,callback)=>{
const mobilePhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/ //手机号
const telPhone = /\d{3}-\d{8}|\d{4}-\d{7}/ //座机号
if(value == "" || value == null || value == undefined){
callback()
}else if(value.includes("-")){
if (!telPhone.test(value)) {
callback(‘请输入电话号码或手机号码‘)
}else{
callback()
}
}else{
if (!mobilePhone.test(value)) {
callback(‘请输入电话号码或手机号码‘)
}else{
callback()
}
}
}
export default内data函数中
validatorRules:{
firephone:{
rules:[{ validator: limitphone, trigger: ‘blur‘}] // validator 自定义校验,trigger 收集子节点的值的时机
},
}
.......更多校验规则
// 小数校验
let latIsDil = (rule,value,callback)=>{
const IsDil = /^([0-9]{1,}[.][0-9]*)$/
if(value == "" || value == null){
callback()
}else if(!IsDil.test(value)){
callback(‘请输入小数‘)
}else{
callback()
}
}
// 正整数校验
let indicatorprecisionPass = (rule,value,callback)=>{
const Ispir = /^$|^\s*[1-9]\d*\s*$/
if(value == ""){
callback(new Error(‘请输入正整数‘))
// callback() 若非必填项,值为空,undefined,null,直接调用callback()回调函数即可
}else if(value == null){
callback(new Error(‘请输入正整数‘))
}else if(!Ispir.test(value)){
callback(new Error(‘请输入正整数‘));
}else{
this.indicatorprecisionNum = value
callback()
}
}
// 动态校验保留几位小数
let lowerlimitPass = (rule,value,callback) => {
if(value == ""){
callback()
}else if(value == null){
callback()
}else if(!this.Issmallnum(this.indicatorprecisionNum,value)){
callback(new Error(‘请保留‘+this.indicatorprecisionNum+‘位小数‘));
}else{
callback()
}
}
methods:{
//校验=> 动态 保留几位小数
Issmallnum(target,str){
var g = eval(‘/^[+-]?\\d+(?:\\.\\d{‘+target+‘})?$/‘)
return g.test(str)
},
}