我必须验证仅接受数值的文本框，并且数字必须以7或8或9（regex）开头。我已经完成了maxlength，minlength和必需的规则。一切正常。但是我不知道如何只接受数字和正则表达式来验证，我已经尝试了一些语法，但是没有用。
<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>
验证规则如下所示：
{
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个字符。例如，/^[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代替自定义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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句