登录模块 (二) -表单校验-绑定错误信息和表单数据 .trim-修饰符去两边空格 & @blur-失去焦点事件 & 校验手机号和验证码

表单校验-绑定错误信息和表单数据 .trim-修饰符去两边空格 & @blur-失去焦点事件 & 校验手机号和验证码

• :error-message 绑定 错误信息 属性
  • 有值 显示错误信息。
  • 没有 显示正确，无提示信息。

第一：绑定错误信息

第二：绑定表单数据

第三：当失去焦点后，对当前表单元素的数据进行校验

​ 获取数据——>校验格式、校验是否输入——>错误-给绑定错误属性赋值 成功-清除对应的值

第四：当点击登录，对整个表单进行校验

​ 校验所有的表单元素，校验后如果有错误信息-校验失败 校验后没有错误信息-校验成功，发请求

src/views/user/login.vue

<van-cell-group>
    //v-bind：绑定错误数据   v-model 双向绑定表单信息  @blur-失去焦点事件  .trim-指定修饰符，去掉数据两边空格
    <van-field @blur="validMobile" 
               :error-message="errorMsg.mobile" 
               v-model.trim="userForm.mobile"  
               label="手机号" placeholder="请输入手机号" />
    <van-field @blur="validCode" 
               :error-message="errorMsg.code" 
               v-model.trim="userForm.code"  
               label="验证码" placeholder="请输入验证码">
        <van-button class="p10" slot="button" size="mini" type="primary">
            发送验证码
        </van-button>
    </van-field>
</van-cell-group>
<div class="btn_box">
    <van-button type="info" @click="login" block round>登 录</van-button>
</div>

• @blur 失去焦点，做校验。

src/views/user/login.vue中的script里

//绑定数据
data () {
    return {
      // 第二：表单数据  
      userForm: {
        mobile: '',
        code: ''
      },
      // 第一：错误信息  
      errorMsg: {
        mobile: '',
        code: ''
      }
    }
  },
  methods: {
    // 校验手机号   return false-阻止当前程序运行
    validMobile () {
      const value = this.userForm.mobile
      if (!value) {
        this.errorMsg.mobile = '请输入手机号',
          return false
      } else if (!/^1[3-9]\d{9}$/.test(value)) {
        this.errorMsg.mobile = '手机号格式不对',
          return false
      } else {
        this.errorMsg.mobile = ''
      }
    },
    // 校验验证码    
    validCode () {
      const value = this.userForm.code
      if (!value) {
        this.errorMsg.code = '请输入验证码',
          return false
      } else if (!/^\d{6}$/.test(value)) {
        this.errorMsg.code = '验证码6位数字',
          return false
      } else {
        this.errorMsg.code = ''
      }
    },
    // 登录时候  整体校验    
    login () {
      this.validMobile()
      this.validCode()
      if (this.errorMsg.mobile || this.errorMsg.code) return false
      // 登录
    }

• 点击登录，整体表单校验。

当然也可以使用和vant配套的插件，vee-validate http://vee-validate.logaretm.com/