VUE+Element UI 前端表单提交时的验证

正则表达式

手机号码：/^[1][3,4,5,6,7,8,9][0-9]{9}$/

价格（可为负数，可有小数）：/(^[\-0-9][0-9]*(.[0-9]+)?)$/

 

 

一. 先写一个form 表单

      <el-form :model="ruleForm"  status-icon  :rules="rules"  ref="ruleForm"   label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          </el-form-item>
          <el-form-item  label="手机号"  prop="phone">
            <el-input  v-model="ruleForm.phone"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="colseForm">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')" >确 定</el-button >
        </div>

model : 用来绑定我们存储数据的一个对象

rules：动态验证我们表单的规则

ref：是我们在提交数据之后要验证的对象，我一般和model绑定的对象一样

prop：el-form-item 中加入prop ,我们就可以对该属性进行数据验证

submitForm：方法中的参数要和ref的一致

 

 

二. 编写规则

    rules: {
       
          username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          phone:[
            { required: true, message: '请输入手机号', trigger: 'blur' },
            {validator: validatePhonePass, trigger: 'blur' }
          ]
       
        }

    var validatePhonePass=(rule, value, callback) => {
        if (value==="")
          callback(new Error("请输入手机号"));
        else if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/).test(value))
          callback(new Error("请输入正确的手机号格式"));
        else
          callback();
      };

 

三. 表单提交

    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            AddAccountUser(this.ruleForm)
                    .then((res) => {
                      if(res.code==0){
                        this.$message({type: "success", message: "操作成功"});
                        this.getlist();//更新数据
                        this.colseForm();//关闭当前窗口
                      }
                      else
                        this.$message.error(res.msg);
                    })
                    .catch((res) => {});
          }
        });
      }

 

this.$refs[formName].validate()：用来验证表单规则