如何在 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

验证规则将是这样的：

{

  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/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">

  <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/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">

  <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>

Answer 2

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

这将匹配任何以 7、8 或 9 开头且后跟 9 个其他数字的数字。