vue js에서 숫자와 regex를 사용하여 검증하는 방법

vue js에서 숫자와 regex를 사용하여 검증하는 방법

숫자 값만 수락하는 텍스트 상자의 유효성을 확인해야 하며, 번호는 7 또는 8 또는 9(regex)로 시작해야 한다.

나는 이미 maxlength, minlength, required rule을 했다.완벽히 잘 작동하고 있어그러나 나는 어떻게 숫자와 regex만을 받아들여서 검증해야 할지 모르겠다.나는 몇몇 구문을 시도해 보았지만 효과가 없었다.

<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/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는 비동기-유효성을 검증하기 위해 사용하는 것으로 보여서pattern관습 대신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>

7, 8 또는 9로 시작하는 10자리 숫자와 일치해야 하는 경우 다음과 같은 것을 사용할 수 있다.^[7-9]\d{9}$(여기에 표시됨).

이 값은 7, 8 또는 9로 시작하는 숫자와 일치하며, 그 다음에 다른 9자리 숫자가 나온다.

참조URL: https://stackoverflow.com/questions/57265963/how-do-i-validate-with-number-and-regex-in-vue-js