我必須驗證僅接受數值的文本框，并且數字必須以 7 或 8 或 9（正則表達式）開頭。我已經完成了 maxlength、minlength 和 required 規則。哪些工作正常。但我不知道如何驗證只接受數字和正則表達式。我嘗試了一些語法但沒有工作。<tab-content title="RELATIONSHIP DETAILS" icon="ti-info-alt" :before-change="validateFirstStep"><el-form :inline="true" :model="formInline1" class="demo-form-inline" :rules="rules1" ref="ruleForm1"><el-form-item label="Mobile Number" prop="mobno"> <el-input maxlength="10" v-model="formInline1.mobno" placeholder="Mobile Number"></el-input> </el-form-item></el-form> </tab-content><script>const app= new Vue({ el: '#app', data() { return { formInline1: {mobno:'',}, rules1: { mobno: [{ required: true, message: 'Please enter Mobile Number', trigger: 'blur' }, { min: 10, max: 10, message: 'Length must be 10', trigger: 'blur' }],} }, methods: { onComplete: function() { alert('Yay. Done!'); },validateFirstStep() { return new Promise((resolve, reject) => { this.$refs.ruleForm1.validate((valid) => { resolve(valid); }); }) },} })</script>
2 回答
繁星coding
TA貢獻1797條經驗 獲得超4個贊
驗證規則將是這樣的：
{
trigger: 'blur',
validator (rule, value, callback) {
if (/^[789]\d{9}$/.test(value)) {
callback();
} else {
callback(new Error('Mobile number must be 10 digits starting 7, 8 or 9'));
}
}
}
不帶參數調用回調表示成功，調用帶錯誤表示驗證失敗。
RegExp 檢查 7、8 或 9 后跟其他 9 個數字。沒有必要那么精確，因為已經有一個總共檢查 10 個字符的驗證規則。eg/^[789]\d*$/也可以工作，因為我們知道有 10 個字符。
在實踐中，最好將其分成兩個單獨的部分，一個確認所有數字都是數字，另一個檢查第一個數字是 7、8 或 9。這將允許為兩種情況顯示不同的錯誤消息.
這是一個完整的例子：
const app = new Vue({
el: '#app',
data () {
return {
formInline1: {
mobno: '',
},
rules1: {
mobno: [{
required: true,
message: 'Please enter Mobile Number',
trigger: 'blur'
}, {
min: 10,
max: 10,
message: 'Length must be 10',
trigger: 'blur'
}, {
trigger: 'blur',
validator (rule, value, callback) {
if (/^[789]\d{9}$/.test(value)) {
callback();
} else {
callback(new Error('Mobile number must be 10 digits starting 7, 8 or 9'));
}
}
}]
}
}
}
});
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-form :inline="true" :model="formInline1" :rules="rules1">
<el-form-item label="Mobile Number" prop="mobno">
<el-input maxlength="10" v-model="formInline1.mobno" placeholder="Mobile Number"></el-input>
</el-form-item>
</el-form>
</div>
更新：
兩種情況的單獨消息示例：
if (/\D/.test(value)) {
callback(new Error('Must all be numbers'));
} else if (!/^[789]/.test(value)) {
callback(new Error('Must start 7, 8 or 9'));
} else {
callback();
}
您可以更進一步，將它們分成兩個單獨的驗證器，但這可能只有在您需要獨立于另一個重用其中一個驗證器時才有用。
進一步更新：
似乎 Element 使用async-validator進行驗證，因此我們可以使用 apattern而不是 custom validator：
const app = new Vue({
el: '#app',
data () {
return {
formInline1: {
mobno: '',
},
rules1: {
mobno: [{
required: true,
message: 'Please enter Mobile Number',
trigger: 'blur'
}, {
min: 10,
max: 10,
message: 'Length must be 10',
trigger: 'blur'
}, {
pattern: /^\d*$/,
message: 'Must be all numbers',
trigger: 'blur'
}, {
pattern: /^[789]/,
message: 'Must start 7, 8 or 9',
trigger: 'blur'
}]
}
}
}
});
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-form :inline="true" :model="formInline1" :rules="rules1">
<el-form-item label="Mobile Number" prop="mobno">
<el-input maxlength="10" v-model="formInline1.mobno" placeholder="Mobile Number"></el-input>
</el-form-item>
</el-form>
</div>
幕布斯7119047
TA貢獻1794條經驗 獲得超8個贊
- 2 回答
- 0 關注
- 193 瀏覽
添加回答
舉報
0/150
提交
取消