ValidateForm 验证表单 和 ValidateInput 验证 Input 组件

具有数据收集、校验和提交功能的表单。支持多种预设规则，自定义规则等。详见代码。

演示

注册者也账户

邮箱地址

昵称

密码

重复密码

注册新用户

在 vue template 中添加结构代码

 
      // html template
      <validate-form @form-submit="onFormSubmit">
        <div class="mb-3">
          <label class="form-label">邮箱地址</label>
          <validate-input
            :rules="emailRules" v-model="formData.email"
            placeholder="请输入邮箱地址"
            type="text"
          />
        </div>
        <div class="mb-3">
          <label class="form-label">昵称</label>
          <validate-input
            :rules="nameRules" v-model="formData.nickName"
            placeholder="请输入昵称"
            type="text"
          />
        </div>
        <div class="mb-3">
          <label class="form-label">密码</label>
          <validate-input
            type="password"
            placeholder="请输入密码"
            :rules="passwordRules"
            v-model="formData.password"
          />
        </div>
        <div class="mb-3">
          <label class="form-label">重复密码</label>
          <validate-input
            type="password"
            placeholder="请再次密码"
            :rules="repeatPasswordRules"
            v-model="formData.repeatPassword"
          />
        </div>
        <template #submit>
          <button type="submit" class="btn btn-primary btn-block btn-large">注册新用户</button>
        </template>
      </validate-form>
         

在 setup 方法中添加数据

  
      // in script setup
  setup () {
    const formData = reactive({
      email: '',
      nickName: '',
      password: '',
      repeatPassword: ''
    })
    const emailRules = [
      // 多种规则
      { type: 'required', message: '电子邮箱地址不能为空' },
      { type: 'email', message: '请输入正确的电子邮箱格式' }
    ]
    const nameRules = [
      { type: 'required', message: '昵称不能为空' }
    ]
    const passwordRules = [
      { type: 'required', message: '密码不能为空' },
      // 范围规则
      { type: 'range', min: { message: '你的密码至少包括六位，不能含有空格', length: 6 } }
    ]
    const repeatPasswordRules = [
      { type: 'required', message: '重复密码不能为空' },
      { type: 'range', min: { message: '你的密码至少包括六位，不能含有空格', length: 6 } },
      // 自定义规则
      {
        type: 'custom',
        validator: () => {
          return formData.password === formData.repeatPassword
        },
        message: '密码不相同'
      }
    ]
    const onFormSubmit = (result) => {
      if (result) {
        alert('🎉 通过啦')
      } else {
        alert('😢 没通过')
      }
    }
    return {
      emailRules,
      nameRules,
      passwordRules,
      repeatPasswordRules,
      onFormSubmit,
      formData
    }
  },        

Dropdown 属性和事件

属性或事件	类型	默认	说明
form-submit	事件	-	回调参数 (result: boolean) => void, result 代表是否通过了验证

DropdownItem 属性和事件

属性或事件	类型	默认	说明
rules	array	-	单个输入框的验证类型，可以传入包含特定对象的数组, 详情可见上面示例代码
tag	input	textarea	input	根节点类型
v-model	string	-	支持 v-model，请对响应式数据