Vue 및 Element-UI를 사용하여 양식의 복잡한 유효성 검사 논리를 구현하는 방법

Vue 및 Element-UI를 사용하여 양식의 복잡한 유효성 검사 논리를 구현하는 방법

소개:
웹 애플리케이션 개발에서 양식 유효성 검사는 자주 발생하는 요구 사항입니다. 양식 유효성 검사는 사용자가 입력한 데이터가 특정 형식이나 규칙을 준수하는지 확인하여 데이터 정확성과 애플리케이션 안정성을 향상시킵니다. 이 기사에서는 Vue 및 Element-UI를 사용하여 양식의 복잡한 유효성 검사 논리를 구현하는 방법을 소개하고 독자에게 관련 코드 예제를 제공합니다.

1. Element-UI 소개
Element-UI는 Vue.js를 기반으로 개발된 데스크탑 컴포넌트 라이브러리로, 테이블, 폼, 버튼 등 사용하기 쉽고 아름다운 UI 컴포넌트를 제공합니다. Element-UI에는 간단한 검증 로직을 쉽게 구현할 수 있는 다양한 양식 검증 기능이 내장되어 있습니다.

2. 폼 검증의 기본 원리
폼 검증의 기본 원리는 폼 요소의 변경 이벤트를 모니터링하여 사용자가 입력한 값을 얻은 후 미리 설정된 일련의 규칙에 따라 검증하는 것입니다. 검증에 성공하면 양식 요소의 상태가 "검증 통과"로 변경되고, 그렇지 않으면 오류 메시지가 표시되고 양식 요소의 상태가 "검증 실패"로 변경됩니다.

3. 간단한 양식 확인을 위해 Element-UI 사용
먼저 Element-UI의 Form 및 FormItem 구성 요소를 도입한 다음 Vue 템플릿에서 이러한 구성 요소를 사용하여 양식을 작성해야 합니다. 지정된 양식 요소에서 아래와 같이 규칙 속성을 설정하여 유효성 검사 규칙을 정의할 수 있습니다.

d477f9ce7bf77f53fbcf36bec1b69b7a
a51093cfdf79e73df1581bd23e14a5ff

<el-form-item label="用户名" prop="username">
  <el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
  <el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
  <el-button type="primary" @click="validateForm">提交</el-button>
</el-form-item>

ffdb25bf2f9d37a252c9d16e8e43c40c
21c97d3a051048b8e55e3c8f199a54b2
데이터의 양식 개체는 양식의 각 입력 상자 값을 저장하고 규칙 개체는 각 입력을 정의합니다. 프레임 유효성 검사 규칙.

Vue의 데이터에서는 다음과 같이 양식 및 규칙 객체를 정의할 수 있습니다:

data() {
return {

form: {
  username: '',
  password: ''
},
rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
  ]
}

}
}
규칙 객체에서 필수, 길이 제한과 같은 여러 확인 규칙을 정의할 수 있습니다. , 등. message 속성은 오류 메시지를 정의하고, Trigger 속성은 확인에 의해 트리거되는 이벤트를 정의합니다.

Vue의 메소드에서는 형식의 유효성을 검사하기 위해 verifyForm 메소드를 정의할 수 있습니다. 코드는 다음과 같습니다:

methods: {
verifyForm() {

this.$refs.myForm.validate((valid) => {
  if (valid) {
    this.$message({
      type: 'success',
      message: '表单校验通过'
    })
  } else {
    this.$message.error('表单校验失败')
    return false
  }
})

}
}
validateForm 메소드에서는 이것을 호출합니다.$ refs.myForm.validate() 메서드를 사용하여 양식 유효성 검사를 실행합니다. 검증 결과는 유효한 콜백 함수를 통해 전달됩니다. 검증에 성공하면 성공 메시지가 표시되고, 그렇지 않으면 실패 메시지가 표시됩니다.

4. 복잡한 검증 로직 구현
때로는 두 입력란의 값이 같은지 비교, 이메일 주소 확인, 휴대폰 번호 확인 등 더 복잡한 검증 로직을 구현해야 할 때도 있습니다. 이 경우 사용자 지정 유효성 검사 규칙을 사용할 수 있습니다.

먼저 Vue의 데이터에서 아래와 같이 사용자 정의 유효성 검사 규칙을 정의할 수 있습니다.

data() {
return {

rules: {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: this.validatePassword, trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: this.validateConfirmPassword, trigger: 'blur' }
  ]
}

}
}
규칙 객체에서 사용자 정의 유효성 검사 규칙을 정의할 수 있습니다. 속성은 유효성 검사 기능을 정의합니다.

그런 다음 Vue의 메서드에서 다음과 같이 사용자 정의 유효성 검사 함수를 정의할 수 있습니다.

methods: {
verifyPassword(rule, value, callback) {

if (value.length < 6 || value.length > 20) {
  callback(new Error('密码长度在6到20个字符'))
} else {
  callback()
}

},
verifyConfirmPassword(rule, value , callback) {

if (value !== this.form.password) {
  callback(new Error('两次输入的密码不一致'))
} else {
  callback()
}

}
}
커스텀 검증 함수에서는 콜백 함수 콜백을 호출하여 검증 결과를 전달할 수 있습니다. 확인에 성공하면 callback()이 호출되고, 그렇지 않으면 callback(new Error('error message'))이 호출됩니다.

마지막으로 아래와 같이 Vue 템플릿에서 사용자 정의 유효성 검사 규칙을 사용합니다.

92c18013b2ff346458cc77df38db5e2d
f498470e5795abbb811a5ba58e19a1153950f2ccdbe6d532f43d14c598b37daa
3d2371aff8fe724e1b7407502d150d7a
188bc5ba182c1014d86fa43f3b857446
0fef7dbb813f9e81977b6ba14582c5ba3950f2ccdbe6d532f43d14c598b37daa
3d2371aff8fe724e1b7407502d150d7a
727895e36dba14260e58f26f56de3092
8f4226748e5b021d2e67e8e4541dcc883950f2ccdbe6d532f43d14c598b37daa
3d2371aff8fe724e1b7407502d150d7a
사용자 정의에서 확인 규칙 중 , type 속성을 사용하여 Element-UI에 내장된 확인 규칙을 지정할 수 있습니다. 예를 들어 type 속성을 'email'로 설정하여 이메일 규칙을 구현할 수 있습니다.

요약:
이 글에서는 Vue와 Element-UI를 사용하여 양식의 복잡한 유효성 검사 논리를 구현하는 방법을 소개합니다. Element-UI에서 제공하는 Form 및 FormItem 구성 요소를 통해 쉽게 양식을 작성하고 규칙 속성을 설정하여 유효성 검사 규칙을 정의할 수 있습니다. 복잡한 검증 로직의 경우 맞춤형 검증 규칙과 검증 기능을 구현할 수 있습니다. 이 기사가 모든 사람이 양식 확인을 위해 Vue 및 Element-UI를 이해하고 사용하는 데 도움이 되기를 바랍니다.

코드 샘플:
전체 샘플 코드는 다음과 같습니다.

d477f9ce7bf77f53fbcf36bec1b69b7a

<el-form-item label="用户名" prop="username">
  <el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
  <el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
  <el-button type="primary" @click="validateForm">提交</el-button>
</el-form-item>

ffdb25bf2f9d37a252c9d16e8e43c40c
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
data() {

return {
  form: {
    username: '',
    password: ''
  },
  rules: {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
    ]
  }
}

},
methods: {

validateForm() {
  this.$refs.myForm.validate((valid) => {
    if (valid) {
      this.$message({
        type: 'success',
        message: '表单校验通过'
      })
    } else {
      this.$message.error('表单校验失败')
      return false
    }
  })
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

以上就是使用Vue和Element-UI实现表单的复杂校验逻辑的一些简单介绍和代码示例。希望本文对于读者能够有所帮助，对于Vue和Element-UI有更深层次的理解和应用。谢谢阅读！

위 내용은 Vue 및 Element-UI를 사용하여 양식의 복잡한 유효성 검사 논리를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!