electron---表单验证问题

一时失言乱红尘 2021-12-16 07:05 376阅读 0赞

使用elementui进行表单提交数据的时候，经常会需要用到表单验证的功能，下面就来说说这个功能。

<template>
      <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model.number="ruleForm.phone" ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>

简单的验证：

<script>
      //这里要俺需要引入，我不是一个对象
      import {isvalidPhone} from '../../../config/validate'
      //定义一个全局的变量，谁用谁知道
      var validPhone=(rule, value,callback)=>{
          if (!value){
              callback(new Error('请输入电话号码'))
          }else  if (!isvalidPhone(value)){
            callback(new Error('请输入正确的11位手机号码'))
          }else {
              callback()
          }
      }
      export default {
        data() {
          return {
            ruleForm: {
              name: '',
              phone:''
            },
            rules: {
              name: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
              ],
              phone: [
                { required: true, trigger: 'blur', validator: validPhone }//这里需要用到全局变量
              ]
            }
          };
        },
        methods: {
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');//这里就是符合规则，然后去调对应的接口
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
        }
      }
    </script>

转载于:https://www.cnblogs.com/e0yu/p/10930269.html

发表评论取消回复

表情：

评论列表（有 0 条评论，376人围观）

还没有评论，来说两句吧...

相关阅读

相关 antd vue表单验证_antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效（其他验证失效）...

\\ antd-for-vue 表单验证失效自定义表单验证使表单非空验证失效(其他验证失效) \\\\\ antd 的表单校验方法包括 validateFields 和

谁借莪１个温暖的怀抱￠/ 2022年10月24日 05:53/ 0 赞/ 299 阅读

相关表单验证

应用一、引入 <script src="Scripts/jquery-1.7.1.min.js"></script> <script src="Scripts/jqu

朱雀/ 2022年07月24日 06:28/ 0 赞/ 544 阅读

相关表单验证

java script验证表单时常用： "^-\[0-9\]\\[1-9\]\[0-9\]\＄"　　//负整数 "^-?//d+＄"　　　　//整

ゝ一纸荒年。/ 2022年06月13日 07:54/ 0 赞/ 387 阅读

相关表单验证

@Min(value = 18, message = " 不得小于18 ") private Integer age; / 表单验证 /

╰+攻爆jí腚メ/ 2022年06月05日 10:15/ 0 赞/ 372 阅读

相关表单验证

angularjs 表单验证，包含必填、手机、邮箱、ip、网址等基于angularjs自己封装的验证插件，之前的插件在angularjs上就不能使用了，然后将之前的封

淩亂°似流年/ 2022年06月04日 10:14/ 0 赞/ 356 阅读

相关表单验证

表单验证为了减轻服务器的压力，请求次数减少，保证用户输入符合要求。 > 常用的表单验证 > \- 日期样式 > \- 表单内容是否为空 > \- 用户名和密码

梦里梦外;/ 2022年05月24日 04:40/ 0 赞/ 379 阅读

相关表单验证

代码虽然有重复，但是重要的是思想和正则表达式的用 ---------- <!DOCTYPE html>

痛定思痛。/ 2022年05月19日 06:35/ 0 赞/ 420 阅读

相关表单验证

java script验证表单时常用： "^-\[0-9\]\\[1-9\]\[0-9\]\＄"　　//负整数 "^-?//d+＄"　　　　//整

小灰灰/ 2022年01月07日 14:35/ 0 赞/ 550 阅读

相关 electron---表单验证问题

使用elementui进行表单提交数据的时候，经常会需要用到表单验证的功能，下面就来说说这个功能。 <template> <div> <e

一时失言乱红尘/ 2021年12月16日 07:05/ 0 赞/ 377 阅读

相关 iview 表单验证失效问题

因为我的页面有两个弹窗 form里面的 ref = "expertData" 都叫 expertData 所以表单验证失效 <Modal> <Form ref=

超、凢脫俗/ 2021年11月05日 04:16/ 0 赞/ 695 阅读