参考文档：

element.eleme.cn/2.11/#/zh-C…

vant-contrib.gitee.io/vant/#/zh-C…

element-ui

el-form与el-form-item提供了一个验证，通过rules来设置验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可, refs来获取dom, 执行校验方法

// template部分
<el-form ref="form" :model="fieldValue" :rules="rules">
		<el-form-item label="用户：" label-width="120px" prop="username">
      <el-input
      size="small"
      v-model="fieldValue.username" 
      ></el-input>
    </el-form-item>
    <el-form-item label="用户：" label-width="120px" prop="password">
      <el-input
      size="small"
      v-model="fieldValue.password" 
      ></el-input>
    </el-form-item>
</el-form>

// script部分
data() {
  return {
    form: {
      username: '',
      password: ''
    },  
    rules: {
      account: [
        { required: true, message: '请输入默认账号', trigger: 'blur' },
        { validator: this.validateAdminAccount, trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入初始密码', trigger: 'blur' },
        { validator: this.validatePsd, trigger: 'blur' }
      ]
    },
  }
},
 
methods () {
  // 验证方法
  validateAdminAccount(rule, value, callback) { 
     if (...) {
      callback(new Error(...))
    } else {
      callback()
    }
  },
}

// 校验
this.$refs.form.validate()
this.$refs['ruleForm'].resetFields()
this.$refs.form.validateField('username')

方法名	介绍	回调函数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: array	string, callback: Function(errorMessage: string))
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	—
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果	Function(props: array	string)

element-ui 没有像vant-ui一样提供了scrollToField滚动到指定表单项

可以通过ref来获取对应表单项使用scrollIntoView方法滚动到对应位置

this.$refs['form'].validate((valid, err) => { 
    if (valid) { 
    } else if (err) {
      // err有返回对应的错误字段信息，对应prop，可以给对应的表单列添加ref
      ...
    }
})
// ele为对应的表单项dom
ele.scrollIntoView({ block: 'start', behavior: 'smooth' })

vant-ui

// @submit指定校验成功执行方法
 <van-form class="psw-wrapper" ref="formbox" @submit="editPwd">
    <van-field
         v-model="account"
         :rules="[
             {
                 validator: validatorPhone,
                 message: '提示信息'
             }
         ]"
         name="account"
         clearable
     >
     </van-field>
     // 点击此按钮触发保存校验
     <van-button class="editBtn" type="primary" native-type="submit">确认修改</van-button>
</van-form>

validatorPhone(val) {
  let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
  return reg.test(val)
}

// 支持传入 name 来验证单个或部分表单项 string | string[]
this.$refs.formbox.resetValidation('account')
this.$refs.formbox.validate('account')

方法名	说明	参数	返回值
submit	提交表单，与点击提交按钮的效果等价	-	-
validate	验证表单，支持传入 name 来验证单个或部分表单项	*name?: string	string[]*	Promise
resetValidation	重置表单项的验证提示，支持传入 name 来重置单个或部分表单项	*name?: string	string[]*	-
scrollToField	滚动到对应表单项的位置，默认滚动到顶部，第二个参数传 false 可滚动至底部	name: string, alignToTop: boolean	-

注意点：

验证错误后，如果不失焦点执行重新校验，点击保存也不会重新校验
当校验规则是随情况不同变化时，当每次校验条件修改时要清空校验结果

表单验证(element-ui和vant-ui)

参考文档：

element-ui

vant-ui