Проверка формы формы Element-ui - Карманная проверка - Пользовательские правила проверки

Форма входа пользователя - двусторонняя привязка данных

<template>
  <div class="form-container">
    <el-form label-width="80px">
      <el-form-item label="手机号">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.code"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      form: {
      
      
        mobile: '',
        code: ''
      }
    }
  },
  methods: {
      
      
    onSubmit() {
      
      
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
  .form-container{
      
      
    width: 600px;
  }
</style>

краткое содержание

• Элементы данных в форме обычно обертываются объектом

• Имя атрибута обычно совпадает с именем в бэкенд-интерфейсе.

• Использовать двустороннюю привязку v-модели к элементам

Проверка формы формы — основное введение

Цель

Понимание необходимости и реализации проверки формы

Проверить необходимость

Прежде чем отправить запрос на бэкэнд для вызова интерфейса, нам нужно проверить параметры, которые будут переданы, чтобы заглушить пользовательские ошибки в зародыше.

Не доверяйте никаким данным пользователя! Не доверяйте никаким данным пользователя! Не доверяйте никаким данным пользователя!

проверить содержимое

• содержимое не может быть пустым
• Сколько цифр должен быть пароль
• Формат номера мобильного телефона должен соответствовать

Метод проверки

• Валидация, не зависящая ни от одного компонента
  • Перед отправкой проанализируйте и обработайте данные самостоятельно.
• Проверка на основе конкретных компонентов (разные библиотеки компонентов могут иметь разные методы проверки)

краткое содержание

• Содержимое формы должно быть проверено (не доверяйте вводу пользователя!);

• Если вы используете форму в библиотеке компонентов, лучше всего использовать собственные методы проверки

Компонент формы формы — проверка формы

Сцены

В приведенной выше форме требуется: требуется имя пользователя

Цель

Освойте использование проверки формы в element-ui

Основные шаги - всего три шага

1. Определите правила проверки. Определите правила по формату в data()

2. Настройте атрибуты в шаблоне, чтобы применить правила (три конфигурации)

   Установите rulesправила проверки ввода атрибутов для формы

   Установите свойства форм modelдля передачи данных формы

   Установите атрибут для элемента формы (Form-Item) prop, значение которого задается как имя поля для проверки

3. Ручная проверка

Шаг 1. Определите правила проверки формы

В данных правила дополнительного определения.

Формат:

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' }
        ]
      }
    }
  },

Уведомление:

• Имена атрибутов в правилах и имена атрибутов в элементах данных формы должны быть согласованы.

Шаг 2 - Конфигурация в шаблоне

содержание:

1. Привязать модель к компоненту el-form как к объекту данных формы

2. Привяжите атрибут rules к компоненту el-form для настройки правил проверки

3. Привяжите атрибут prop к элементу формы el-form-item, который необходимо проверить.Примечание: атрибут 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. Ручная проверка Pocket

Формат

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

проиллюстрировать:

• Метод проверки входит в состав компонента формы и используется для проверки содержимого формы.
• Необходимо добавить ссылку на компонент формы в шаблон: функция ref в основном используется для получения ручной триггерной проверки компонента формы

шаблон кода

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

Добавьте ref для ссылки на компоненты электронной формы.

код

Проводить ручную проверку при отправке, если проверка пройдена

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. Ручная проверка

Компонент формы формы — проверка формы

Цель

1. Номер телефона не может быть пустым и должен состоять из 11 цифр (/^1[0–9]{10}$/).

2. Требуется пароль, длина от 6 до 8 символов.

код

определить правила

rules:{
    
    
          name: [
            // trigger: 什么时候触发验证 
            {
    
     required: true, message: '请输入手机号', trigger: 'blur' },
            // pattern : 正则
            {
    
     pattern: /^1[345678]\d{9}$/, message: '请输入合法的手机号', trigger: 'blur' }
          ],
          password: [
            {
    
     required: true, message: '请输入密码', trigger: 'blur' },
            {
    
     min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }
          ]
        }

Настройте правила приложения в шаблоне

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="手机号" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password"></el-input>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>

Уведомление

Имена атрибутов в следующих трех местах должны быть согласованы

Компонент формы формы — проверка формы — пользовательские правила проверки

Сцены:

пароль не разрешен123456

Цель

Освойте формат использования пользовательских правил проверки

ход мыслей

Настроить валидатор в правилах

Формат

rules:{
    
    
    属性名1: [
      {
    
     
        // 注意参数顺序
        validator: function (rule, value, callback) {
    
    
      		// rule：采用的规则
          // value: 被校验的值
          // callback是回调函数， 
          //      如果通过了规则检验，就直接调用callback()
          //      如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
        	//         例如：callback(new Error('错误说明'))
      	}, 
        trigger: 'blur' 
     }]
}

посадочный код

rules: {
    
    
  name: [{
    
    required: true, message:'必须要填入', triggle: 'blur'}],
  code: [
      {
    
    
        validator:(rule, value, callback)=>{
    
    
          console.log(rule, value, callback)
          if(value === '123456') {
    
    
            callback(new Error('这是世界上最差的密码了'))
          } else {
    
    
            callback()
          }
      	},
        triggle: 'blur'
      },
      {
    
    min: 6, max:8, message:'长度为6-8位', triggle: 'blur'},
      {
    
    required: true, message:'必须要填入', triggle: 'blur'},
  ]
}

краткое содержание

• Пользовательские правила могут сделать логику проверки более гибкой, а ее формат фиксирован.
• обратный вызов должен быть вызван