vue之elementui表单验证最基本实例

谁借莪１个温暖的怀抱￠ 2023-01-20 09:57 35阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]  
使用，在模板中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]  
在js中

<template>
      <div class="login-page">
    
        <div class="login-box">
          <div class="login-logo">
            <a href="../../index2.html"><b>vue</b>商城</a>
          </div>
          <div class="card">
            <div class="card-body login-card-body">
              <p class="login-box-msg">帐户登录</p>
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-form-inline">
                <el-form-item prop="username">
                  <el-input placeholder="账号" suffix-icon="iconfont icon-index" v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input type="password" placeholder="密码" suffix-icon="el-icon-date" v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                  <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                  <el-button @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
              <p class="mb-1">
                <a href="forgot-passwordword.html">忘记密码</a>
              </p>
              <p class="mb-0">
                <a href="register.html" class="text-center">注册新会员</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script> export default { data () { // 自定义验证规则 var validateUser = (rule, value, callback) => { if (value === '') { callback(new Error('请输入账号')) } else { callback(console.log('账号验证成功')) } } return { ruleForm: { username: '11', password: '111' }, rules: { username: [ { validator: validateUser, trigger: 'blur' } ], password: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ] } } }, methods: { submitForm (formName) { this.$refs[formName].validate((valid) => { if (!valid) return console.log('error submit!!') // 如果验证不通过 console.log('success') }) }, reset () { this.$refs.ruleForm.resetFields() } } } </script>
    <style lang="less" scope> .btns { display: flex; flex-direction: row-reverse; } </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: /images/20221021/5b09ded2486d40a48970ab156748e69b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]: /images/20221021/e3a783b94c834187bb3b8070ce5ee608.png