Write a simple-to-use scalable vue form validation plugin (vue-validate-easy)

Write a vue form validation plugin (vue-validate-easy)

demand

Goal: easy to use scalable

How simple

Developers do

1. He wrote a form, specify a name, specify the validation rules.
2. Call the method to submit the form, you can get data validation is successful.
3. Call to reset the form method to reset the form
4. Custom authentication methods

Program should do

1. Get form elements, binding events
2. When there is an input, get form values, using the rules specified by the developer to verify if the validation errors give an error message.

Implementation

• Get native form elements, the acquired instruction VUE outer element is wrapped in a native form elements, where I used to get the data-type property of the native form element
• Validation rules, parameter validation, custom error from the command prompt to get the value of vue
• When submitting, we need to identify a form, here I use the data-scope attribute to group form
• Reset, reset the entire forms with data-scope

Common method

• Lazy verification command modifier by .lazy
• Remote authentication through async await
• Validation delay, .deay command modifier, and data-delay property
• Forms validation active, single-field validation active
• Single Field Reset Form

Scalable

• Custom Error Message
• Custom authentication methods
• Custom error handling
• Custom form elements (by means not native element)

After the completion of the use of the code

// 你只要指定 data-scope data-name data-type v-validate-easy 这四个属性的值，然后通过调用this.V.$submit(scope)就可以进行提交表单了
<form>
    <div class="my-form-group" data-scope="register" data-name="email" data-type="input"
    v-validate-easy="[['required','邮箱为必填项目'],['email']]">
      <label>
        <div class="label">邮箱</div>
        <input class="input" type="text" spellcheck="false" placeholder="请输入邮箱"/>
      </label>
    </div>
    
    <div id="pwd" class="my-form-group" data-scope="register" data-name="password" data-type="input"
    v-validate-easy="[['required','密码不能为空'],['password'],['maxLength',[32],'密码最长为32位']]">
      <label>
        <div class="label">密码</div>
        <input class="input" type="text" spellcheck="false" placeholder="请再次输入密码"/>
      </label>
    </div>
    
    <div class="my-form-group" data-scope="register" data-name="password" data-type="input"
    v-validate-easy="[['required','确认密码不能为空'],['equalTo',['pwd'],'密码输入不一致']]">
      <label>
        <div class="label">确认密码</div>
        <input class="input" type="text" spellcheck="false" placeholder="请输入邮箱"/>
      </label>
    </div>
    <div class="btn-group">
      <button class="my-btn" @click.prevent="submit('register')">注册</button>
      <button class="my-btn" @click.prevent="reset('register')">重置</button>
    </div>
  </form>

  methods: {
    reset(scope) {
      this.V.$reset(scope)
    },
    submit(scope) {
      this.V.$submit(scope, (canSumit,data) => {
        // canSumit为true时，则所有该scope的所有表单验证通过
        if(!canSumit) return

        // 发送请求
        axios({ url: '/test',data, method: 'post'})
          .then(() => {
            // 成功响应处理
          })
          .catch(() => {
            // 错误处理
          })
      })
    }
  },

Use of custom components, the more concise

  <form>
    <h3>用户登录</h3>
    <my-input label="用户名" data-scope="login" data-name="username" v-validate-easy="[['required']]"></my-input>
    <my-input label="密码" data-scope="login" type="password" data-name="pwd" v-validate-easy="[['required']]"></my-input>

    <div class="btn-group">
      <button class="my-btn" @click.prevent="submit('login')">登录</button>
      <button class="my-btn" @click.prevent="reset('login')">重置</button>
    </div>
  </form>

vue-validate-easy github address

Welcome to the star, the project have any questions or suggestions, please mention the issue

vue-validate-easy document address