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>
  • 相关阅读:
    https页面打不开
    Centos6.5安装步骤(U盘安装)
    利用Metrics+influxdb+grafana构建监控平台
    CentOS 7安装Oracle 11gR2以及设置自启动
    如何安装Oracle Instant Client
    (转)rlwrap真是一个好东西
    oracle数据库11g(11.2.0.1)安装报错:提示ins_ctx.mk编译错误。
    oracle查看所有表及各表行数
    dp hdu5653 xiaoxin and his watermelon candy
    C语言free函数的原理——————————【Badboy】
  • 原文地址:https://www.cnblogs.com/nanacln/p/8758711.html
Copyright © 2011-2022 走看看