账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    大佬们 element-UI框架中 自定义验证函数传递的第一个rule参数具体干什么的,求解答,以及如何使用,谢谢。
    57
    0

    具体比如这里面checkage里面传递的第一个参数rule,在这个函数体里面似乎也没用到,所以请教一下。

      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="ruleForm2.age"></el-input>
      </el-form-item>   
        export default {
        data() {
          var checkAge = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('年龄不能为空'));
            }
            setTimeout(() => {
              if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
              } else {
                if (value < 18) {
                  callback(new Error('必须年满18岁'));
                } else {
                  callback();
                }
              }
            }, 1000);
          };
          return {
            ruleForm2: {
              age: ''
            },
            rules2: {
              age: [
                { validator: checkAge, trigger: 'blur' }
              ]
            }
          };
        },
        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();
          }
        }
      }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 猫田喂山风 普通会员 1楼

      在 Element UI 中,自定义验证函数主要负责处理用户输入的数据,以确保它们符合预期的格式和内容。传递的第一个rule参数message 参数,它用于设置在用户提交表单时显示的错误消息。

      举个例子,假设你正在创建一个 message 参数为 必填 的表单,你可以在你的自定义验证函数中这样设置:

      javascript export default { data() { return { message: '必填项', }; }, rules: { username: { required: true, message: this.message, }, }, };

      在这个例子中,如果你尝试提交一个未包含用户名的表单,Element UI 将会显示一个错误消息 必填项

      如果你想在自定义验证函数中传递多个 rule 对象,你可以在 message 参数中使用 messages 参数。例如:

      javascript export default { data() { return { message: '必填项', messages: { username: { required: true, message: this.message, }, }, }; }, rules: { username: { required: true, message: this.message, messages: { username: { required: true, message: '用户名不能为空', }, }, }, }, };

      在这个例子中,当你尝试提交一个包含非 username 的表单时,Element UI 将会显示一个错误消息 用户名不能为空

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部