分類
Form 組件基于 async-validator 實現的數據驗證慕匠，給 Form 設置屬性 rules燎窘，同時給需要驗證的 FormItem 設置屬性 prop 指向對應字段即可靡羡。
一混驰、統(tǒng)一放在一個文件
組件
html：
<Form ref="refAddCityClass" :model="addCityClass" :rules="ruleAddCityClass" :label-width="100" >
<FormItem label="城市類別：" prop="className">
<Input type="text" v-model="addCityClass.className" :maxlength="15" placeholder="請輸入城市類別名稱" clearable/>
</FormItem>
</Form>
<Button type="primary" @click="methodAddCityClass">確認</Button>
js:
// 驗證的文件秉馏，放在一個文件中統(tǒng)一管理
import validate from '@/utils/validate'
data () {
return {
addCityClass: {
className: ''
},
ruleAddCityClass: validate,
}
},
methods: {
methodAddCityClass() {
// 這里一定要寫渊季，只有驗證通過后才會執(zhí)行
this.$refs['refAddCityClass'].validate(valid => {
if (valid) {
// 如果驗證通過，執(zhí)行的一些操作测垛，比如調接口等
} else {
// 如果驗證不通過執(zhí)行的一些操作
}
})
},
}
validate.js
const validateNameZh = (rule, value, callback) => {
if (value.trim() === '') {
return callback(new Error('請輸入名稱'))
} else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
return callback(new Error('請輸入中英文數字下劃線捏膨，不能輸入特殊字符'))
} else {
callback()
}
}
// 這里可以繼續(xù)寫其他驗證規(guī)則
const validate = {
className: [
{
required: true,
validator: validateNameZh,
trigger: 'blur'
}
],
// 這里可以繼續(xù)寫其他要驗證的字段
}
export default validate
二、放在各自的組件中
組件
html：
<Form ref="refAddCityClass" :model="addCityClass" :rules="ruleAddCityClass" :label-width="100" >
<FormItem label="城市類別：" prop="className">
<Input type="text" v-model="addCityClass.className" :maxlength="15" placeholder="請輸入城市類別名稱" clearable/>
</FormItem>
</Form>
<Button type="primary" @click="methodAddCityClass">確認</Button>
js:
可以放在script標簽引入文件的下面
const validateNameZh = (rule, value, callback) => {
if (value.trim() === '') {
return callback(new Error('請輸入名稱'))
} else if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
return callback(new Error('請輸入中英文數字下劃線食侮，不能輸入特殊字符'))
} else {
callback()
}
}
data () {
return {
addCityClass: {
className: ''
},
ruleAddCityClass: {
className: [
{
required: true,
validator: validateNameZh,
trigger: 'blur'
}
],
// 這里可以繼續(xù)寫其他要驗證的字段
}
}
},
methods: {
methodAddCityClass() {
this.$refs['refAddCityClass'].validate(valid => {
if (valid) {
// 如果驗證通過号涯，執(zhí)行的一些操作，比如調接口等
} else {
// 如果驗證不通過執(zhí)行的一些操作
}
})
},
}
其他問題
可以給formitem單獨加rules
情況：更加靈活锯七，比如用在同一個表單链快，但是切換顯示的表單項。
<FormItem label="默認差標金額" prop="defaultPrice" :rules="{//驗證...}">
<Input type="text" v-model="formSet.defaultPrice" style="width: 200px;"/>
</FormItem>
在Modal模態(tài)框中使用表單的話驗證不生效
解決辦法：使用模態(tài)框的自定義頁腳眉尸，關閉按鈕等域蜗，在方法調用后先進行驗證，驗證通過后進行其他操作效五，隨后把模態(tài)框關閉。
html：
<Modal width="400" v-model="setModal" title="修改全局設置" :mask-closable="false">
<Form ref="refSet" :model="formSet" :rules="ruleSet" :label-width="100" >
<FormItem label="默認差標金額" prop="defaultPrice">
<Input type="text" v-model="formSet.defaultPrice" style="width: 200px;"/>
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="cancel">取消</Button>
<Button type="primary" @click="ok">確認</Button>
</div>
</Modal>
js：
ok () {
this.$refs['refSet'].validate(valid => {
if (valid) {
// 在其他操作(調接口等)完成后炉峰，將模態(tài)框關閉
this.setModal = false
}
})
},
cancel () {
this.setModal = false
},
數字驗證不生效
{type: 'number', message: '請輸入數字', trigger: 'blur'}
上面這種驗證方式是不生效的畏妖，即使生效也會出現其他問題（當不止驗證數字時，同時驗證不為空等）
解決辦法：使用自定義驗證方式
const validateNumber = (rule, value, callback) => {
if (value.trim() === '') {
return callback(new Error('不能為空'))
} else if (!/^[0-9]*$/.test(value)) {
return callback(new Error('請輸入數字'))
} else {
callback()
}
}
number: [{ required: true, trigger: 'blur', validator: validateNumber }],
必填驗證類型
用iview自帶的表單驗證select標簽的時候疼阔，一直驗證不通過戒劫，因為iview默認校驗數據類型為String，而我的select用的value是number類型的
assetPurpose: [{
required: true,
message: '請選擇資產用途',
trigger: 'change',
type:'number'
}],
string: 必須是字符串類型婆廊。這是默認類型
number: 必須是數字
boolean: 必須是布爾型的
method:必須是類型函數
regexp: 必須是ReGEXP的實例迅细，或者是在創(chuàng)建新的ReGEXP時不會生成異常的字符串
integer:必須是整數.
float:必須是浮點數.
array: 必須是由Array.isArray確定的數組
object: 必須是類型對象而不是Array.isArray
enum: 枚舉中必須存在值。
date: 按日期確定的值必須有效
url: 必須是URL類型淘邻。
hex: 必須是十六進制茵典。
email:必須是電子郵件類型。
