表单提交的效验

校验必要性

在向后端发请求调用接口之前，我们需要对所要传递的参数进行验证，来把用户的错误扼杀在摇篮之中。

不能相信用户的任何输入！不能相信用户的任何输入！不能相信用户的任何输入！

效验的内容一般如下:

• 内容不能为空（*）
• 密码长度必须多少位
• 手机号的格式要合规
• 邮箱的格式要合规
• ...

校验方式

• 不依赖于任何组件的验证

• 在做提交之前，自己把数据分析处理一下。

• 基于具体组件的验证（不同的组件库，它的验证方式可能也各有不同）

小结

• 表单内容一定要验证（不能相信用户的任何输入！）；
• 如果使用是组件库中的表单，最好是采用它们自带的验证方式

下面以element-ui为例怎样来验证表单的提交..

通常分为三步走:

1. 定义验证规则。data()中按格式定义规则
2. 在模板上做属性配置来应用规则（三个配置）
   给表单设置 rules 属性传入验证规则
   给表单设置model属性传入表单数据
   给表单项（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名
3. 手动兜底验证

定义表单验证规则

格式:

data() {
  return {
    rules: {
        // 字段名1：表示要验证的属性
        // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
        //     数组中的多条规则会按顺序进行
        字段名1: [
          { 验证规则1 },
          { 验证规则2 },
        ],
        字段名2: [
          { 验证规则1 },
          { 验证规则2 },
        ], 
		}
  }
}

实例:

  { required: true, message: '请输入验证码', trigger: 'blur' },
  { pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },
  { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }

实操如下:

data () {
    return {
      // 表单验证规则，整体是一个对象
      // 键：要验证的字段, 值：是一个数组，每一项就是一条规则
      
      rules: {
        // 字段名：mobile就表示要验证的 属性
        // 值: 是一个数组。数组中的每一项表示一条规则。
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      }
    }
  },

注意：

• rules中的属性名与表单数据项中的属性名必须是一致的。

步骤2-模板中的配置

内容：

1. 给 el-form 组件绑定 model 为表单数据对象
2. 给 el-form 组件绑定 rules 属性配置验证规则
3. 给需要验证的表单项 el-form-item 绑定 prop 属性，注意：prop 属性需要指定表单对象中的数据名称

代码:

<el-form label-width="80px" :model="form" :rules="rules">
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="form.mobile"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="code">
    <el-input v-model="form.code"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="onCancel">取消</el-button>
  </el-form-item>
</el-form>

我们做到这一步时，当用户输入的内容不符合表单规则要求时，并且某个输入框失焦时，它会给出相应的提示，当我们输入的内容符合要求时，错误提示会自动消失。

步骤3-手动兜底验证

格式:

element-ui的表单组件.validate(valid => {
	if(valid) {
	   // 通过了验证
	} else {
		 // 验证失败
	}
})

说明：

• validate方法是表单组件自带的，用来对表单内容进行检验。
• 需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证

代码-模板说明：

• validate方法是表单组件自带的，用来对表单内容进行检验。
• 需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证

代码-模板:

<el-form label-width="80px" 
+  ref="form"
   :model="form"
   :rules="rules">

添加ref来引用el-form组件。

代码

在做提交时进行手动兜底验证，如果通过了验证

doLogin () {
  alert('我可以做登录了')
},
submit () {
  this.$refs.form.validate(valid => {
    // valid 就是表单验证的结果，如果是true，表示通过了
    // console.log(valid)
    if (valid) {
      // 通过了验证，你可以做后续动作了
      this.doLogin()
    }
  })
}

小结

步骤

1. 定义验证规则(按element-ui的要求来)
2. 配置模板，应用规则
   给表单设置 rules 属性传入验证规
   给表单设置model属性传入表单数据
   给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名
3. 手动兜底验证