element表单验证

• el-form 组件

• :model="ruleForm" ruleForm是data中定义的存储的是用户名和密码值的对象 通过model传给el-form组件

• :rules="rules" rules是data中定义的对象目的是校验用户名和密码的规则

• ref="ruleForm" 咱们可以通过ref来获取el-form组件内部的方法 比如： validate校验方法 resetFields重置方法

• status-icon 是在表单校验错误的时候 输入框中出现的提示小图标

• label-width="200px" 是用来控制用户名和密码文本的宽度

• label 控制输入框的文本 prop="username" 是对应表单域model中的username 字段规则的名字需要和表单域model中的字段一模一样

 <div class="myform">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
    label 控制输入框的文本  prop="username" 是对应表单域model中的username字段
     规则的名字需要和表单域model中的字段一模一样
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></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>

定义和用法

test() 方法用于检测一个字符串是否匹配某个模式.

如果字符串中有匹配的值返回 true ，否则返回 false。