Vue에서 양식 입력 확인 및 제출을 처리하는 방법-View.js-php.cn

Vue에서 양식 입력 확인 및 제출을 처리하는 방법

WBOY

풀어 주다： 2023-10-15 08:48:18

원래의

1927명이 탐색했습니다.

Vue에서 양식 입력 확인 및 제출을 처리하는 방법

Vue의 양식 입력 확인 및 제출
프론트 엔드 개발에서 양식 입력 확인 및 제출은 매우 중요한 링크입니다. 널리 사용되는 프런트엔드 프레임워크인 Vue는 양식 입력의 확인 및 제출을 처리하는 몇 가지 편리한 방법을 제공합니다. 이 글에서는 Vue에서 양식 입력을 확인하고 제출하는 방법을 소개하고 몇 가지 코드 예제를 제공합니다.

양식 입력 유효성 검사
Vue에서는 내장 유효성 검사기를 사용하여 양식 입력의 유효성을 검사할 수 있습니다. Vue는 템플릿에서 직접 사용할 수 있는 "검증 지침"이라는 방법을 제공합니다.

먼저 HTML의

태그에 Vue 및 Element UI의 라이브러리 파일을 소개합니다(Element UI는 Vue.js를 기반으로 한 데스크톱 구성 요소 라이브러리 집합입니다).

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

로그인 후 복사

그런 다음 of HTML 태그에 간단한 양식을 정의합니다:

<body>
  <div id="app">
    <el-form ref="form" :rules="rules" label-width="100px" style="max-width: 450px; margin: 50px auto;">
      <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-button type="primary" @click="submitForm('form')">提交</el-button>
    </el-form>
  </div>
  
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          form: {
            username: '',
            password: '',
          },
          rules: {
            username: [
              { required: true, message: '用户名不能为空', trigger: 'blur' },
              { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
            ],
            password: [
              { required: true, message: '密码不能为空', trigger: 'blur' },
              { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
            ],
          },
        };
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('表单校验通过，可以提交');
            } else {
              console.log('表单校验失败');
              return false;
            }
          });
        },
      },
    });
  </script>
</body>

로그인 후 복사

위 코드에서는 v-model 지시어를 통해 양식의 입력 값을 바인딩하고 :rules 속성을 통해 양식의 확인 규칙을 바인딩합니다. 그 중 required: true는 필수 항목을 나타내며, min과 max는 최소 및 최대 길이를 나타냅니다. required: true 表示必填项，min 和 max 代表最小和最大长度。

在 submitForm 方法中，我们调用了 $refs[formName].validate 方法进行表单校验。校验成功时，会弹出一个提示框。

提交表单
在Vue中，提交表单可以通过发送Ajax请求或调用后端API来实现。这里给出一个通过发送Ajax请求的示例代码：

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        form: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
          ],
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 表单校验通过，发送Ajax请求
            this.$http.post('/api/submit', this.form).then((response) => {
              console.log('提交成功');
            }).catch((error) => {
              console.log('提交失败');
            });
          } else {
            console.log('表单校验失败');
            return false;
          }
        });
      },
    },
  });
</script>

로그인 후 복사

在上述代码中，我们使用 Vue 提供的 $http 对象发送 Ajax 请求，将表单数据提交给后端的 /api/submit

submitForm 메서드에서는 양식 확인을 위해 $refs[formName].validate 메서드를 호출합니다. 확인이 성공하면 프롬프트 상자가 나타납니다.

양식 제출

Vue에서는 Ajax 요청을 보내거나 백엔드 API를 호출하여 양식을 제출할 수 있습니다. 다음은 Ajax 요청을 보내기 위한 샘플 코드입니다.

rrreee

위 코드에서는 Vue에서 제공하는 $http 객체를 사용하여 Ajax 요청을 보내고 양식 데이터를 백엔드의 /api/submit 인터페이스. 🎜🎜요약🎜위의 예를 통해 Vue에서 양식 입력의 체크섬 제출을 처리하는 것이 매우 간단하다는 것을 알 수 있습니다. 검증 규칙을 설정하고 검증 메서드를 호출한 다음 검증 결과에 따라 해당 처리를 수행하기만 하면 됩니다. 동시에 Ajax 요청을 보내거나 백엔드 API를 호출하여 양식 데이터를 제출할 수도 있습니다. 🎜🎜물론 위 코드는 단순한 예시일 뿐이므로 실제 필요에 따라 확장하고 수정할 수 있습니다. 이 기사가 Vue에서 양식 입력 확인 및 제출을 처리하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 Vue에서 양식 입력 확인 및 제출을 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!