如何在 vue js 中使用数字和正则表达式进行验证？

Question

我必须验证仅接受数值的文本框，并且数字必须以 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>

Answer 1

验证规则将是这样的：{&nbsp; trigger: 'blur',&nbsp; validator (rule, value, callback) {&nbsp; &nbsp; if (/^[789]\d{9}$/.test(value)) {&nbsp; &nbsp; &nbsp; callback();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; callback(new Error('Mobile number must be 10 digits starting 7, 8 or 9'));&nbsp; &nbsp; }&nbsp; }}不带参数调用回调表示成功，调用带错误表示验证失败。RegExp 检查 7、8 或 9 后跟其他 9 个数字。没有必要那么精确，因为已经有一个总共检查 10 个字符的验证规则。eg/^[789]\d*$/也可以工作，因为我们知道有 10 个字符。在实践中，最好将其分成两个单独的部分，一个确认所有数字都是数字，另一个检查第一个数字是 7、8 或 9。这将允许为两种情况显示不同的错误消息.这是一个完整的例子：const app = new Vue({&nbsp; el: '#app',&nbsp; data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; formInline1: {&nbsp; &nbsp; &nbsp; &nbsp; mobno: '',&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; rules1: {&nbsp; &nbsp; &nbsp; &nbsp; mobno: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; required: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message: 'Please enter Mobile Number',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trigger: 'blur'&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; min: 10,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max: 10,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message: 'Length must be 10',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trigger: 'blur'&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trigger: 'blur',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; validator (rule, value, callback) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (/^[789]\d{9}$/.test(value)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; callback();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; callback(new Error('Mobile number must be 10 digits starting 7, 8 or 9'));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }});<link rel="stylesheet" href="https://unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script><script src="https://unpkg.com/element-ui@2.10.1/lib/index.js"></script><div id="app">&nbsp; <el-form :inline="true" :model="formInline1" :rules="rules1">&nbsp; &nbsp; <el-form-item label="Mobile Number" prop="mobno">&nbsp; &nbsp; &nbsp; <el-input maxlength="10" v-model="formInline1.mobno" placeholder="Mobile Number"></el-input>&nbsp; &nbsp; </el-form-item>&nbsp; </el-form></div>更新：两种情况的单独消息示例：if (/\D/.test(value)) {&nbsp; callback(new Error('Must all be numbers'));} else if (!/^[789]/.test(value)) {&nbsp; callback(new Error('Must start 7, 8 or 9'));} else {&nbsp; callback();}您可以更进一步，将它们分成两个单独的验证器，但这可能只有在您需要独立于另一个重用其中一个验证器时才有用。进一步更新：似乎 Element 使用async-validator进行验证，因此我们可以使用 apattern而不是 custom validator：const app = new Vue({&nbsp; el: '#app',&nbsp; data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; formInline1: {&nbsp; &nbsp; &nbsp; &nbsp; mobno: '',&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; rules1: {&nbsp; &nbsp; &nbsp; &nbsp; mobno: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; required: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message: 'Please enter Mobile Number',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trigger: 'blur'&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; min: 10,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max: 10,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message: 'Length must be 10',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trigger: 'blur'&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pattern: /^\d*$/,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message: 'Must be all numbers',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trigger: 'blur'&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pattern: /^[789]/,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message: 'Must start 7, 8 or 9',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trigger: 'blur'&nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }});<link rel="stylesheet" href="https://unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css"><script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script><script src="https://unpkg.com/element-ui@2.10.1/lib/index.js"></script><div id="app">&nbsp; <el-form :inline="true" :model="formInline1" :rules="rules1">&nbsp; &nbsp; <el-form-item label="Mobile Number" prop="mobno">&nbsp; &nbsp; &nbsp; <el-input maxlength="10" v-model="formInline1.mobno" placeholder="Mobile Number"></el-input>&nbsp; &nbsp; </el-form-item>&nbsp; </el-form></div>

Answer 2

如果您需要匹配任何长度为 10 位的数字，从 7、8 或 9 开始，那么您可以使用如下内容：（此处的^[7-9]\d{9}$示例）。这将匹配任何以 7、8 或 9 开头且后跟 9 个其他数字的数字。