zoukankan      html  css  js  c++  java
  • vue2移动端使用vee-validate进行表单验证

    使用vee-validate时若要使用中文版本提示时,vee-validate的版本需要注意

    "vee-validate": "2.0.0-rc.25"

    在main.js里添加如下代码

    import VeeValidate, { Validator } from 'vee-validate'
    import CN from 'vee-validate/dist/locale/zh_CN.js'
    Validator.addLocale(CN)
    Vue.use(VeeValidate, {
      locale: 'zh_CN'
    })

    若想修改默认的提示

    // 修改默认错误提示
    const dictionary = {
      zh_CN: {
        messages: {
          email: () => '邮箱格式不正确哦',
          required: (val) => {
            let msg = ''
            switch (val) {
              case 'email':
                msg = '邮箱'
                break
              case 'qq':
                msg = 'qq'
                break
              default:;
            }
            msg = msg + '不能为空哦'
            return msg
          }
        }
      }
    }
    Validator.updateDictionary(dictionary)

    自定义校验规则如下:

    Validator.extend('qq', {
      messages: {
        zh_CN: field => 'qq号码输入不正确'
      },
      validate: value => {
        return /^[1-9][0-9]{4,14}$/.test(value)
      }
    })

    以上代码写在js里。组件内进行表单验证的代码如下

    <template>
      <div class="hello">
        <form @submit.prevent="validateBeforeSubmit">
          <div class="column is-12">
            <label class="label" for="email">Email</label>
            <p :class="{ 'control': true }">
                <input v-validate="'required|email'" v-model="email" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
                <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
            </p>
          </div>
          <div class="column is-12">
            <label class="label" for="qq">qq</label>
            <p :class="{ 'control': true }">
                <input v-validate="'required|qq'" :class="{'input': true, 'is-danger': errors.has('qq') }" name="qq" type="text" placeholder="qq">
                <span v-show="errors.has('qq')" class="help is-danger">{{ errors.first('qq') }}</span>
            </p>
          </div>
          <div class="column is-12">
              <p class="control">
                  <button class="button is-primary" type="submit">Submit</button>
              </p>
          </div>
        </form>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          email: '',
          qq: ''
        }
      },
      methods: {
        validateBeforeSubmit () {
          this.$validator.validateAll().then((result) => {
            if (result) {
              // eslint-disable-next-line
              alert('Form Submitted!');
              return
            }
    
            alert('Correct them errors!')
          })
        }
      }
    }
    </script>
  • 相关阅读:
    hdu 2019 数列有序!
    hdu 2023 求平均成绩
    HDU 5805 NanoApe Loves Sequence (思维题) BestCoder Round #86 1002
    51nod 1264 线段相交
    Gym 100801A Alex Origami Squares (求正方形边长)
    HDU 5512 Pagodas (gcd)
    HDU 5510 Bazinga (字符串匹配)
    UVALive 7269 Snake Carpet (构造)
    UVALive 7270 Osu! Master (阅读理解题)
    UVALive 7267 Mysterious Antiques in Sackler Museum (判断长方形)
  • 原文地址:https://www.cnblogs.com/nanacln/p/8758711.html
Copyright © 2011-2022 走看看