vant中給van-field添加正則一定要在van-form中
在van-field標(biāo)簽上聲明一個(gè)rules屬性，把它復(fù)制給一個(gè)data中變量，在data中聲明這個(gè)變量。該變量的形式為一個(gè)數(shù)組，里面有一個(gè)元素為對(duì)象，對(duì)象的第一個(gè)屬性為pattern是你需要校驗(yàn)的正則表達(dá)式，第二個(gè)屬性為message是錯(cuò)誤后的提示文字，第三個(gè)屬性為trigger是什么時(shí)候觸發(fā)正則檢驗(yàn)van-field。
下面是代碼演示：

<van-form ref="form" @failed="onFailed" @submit="onSubmit">
<p class="zh"><van-field name="zh" :rules="zhrules"  label-width="8.4rem" colon v-model="username" label="賬號(hào)"/></p>
<p class="psw"><van-field name="psw" :rules="pswrules" label-width="8.4rem" colon v-model="password" label="密碼" /></p>
</van-form>

export default {
  data () {
    return {
      username: '',
      password: '',
      zhrules: [{ required: true, message: '賬號(hào)不能為空', trigger: 'onBlur' }, { pattern: /^[\w-]{4,16}$/, message: '賬號(hào)格式錯(cuò)誤', trigger: 'onBlur' }],
      pswrules: [{ required: true, message: '密碼不能為空', trigger: 'onBlur' }, { pattern: /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/, message: '密碼格式錯(cuò)誤', trigger: 'onBlur' }]
    }
  }
}