语义ui可以在一个字段上形成验证规则是否以不同的字段为条件?

时间:2014-12-23 13:46:51

标签: javascript forms validation semantic-ui

我们说我有一个有两个字段的表格。我希望以下内容可以:

将表单提交为空 - 验证成功 这两个字段都包含数据 - 验证成功 字段1有数据,字段2为空 - 验证成功 字段一个为空,字段二有数据 - 验证失败

有办法做到这一点吗?

我的服务器代码已经验证了这一点,但我很乐意能够阻止客户端如果不必更新服务器,但是如果不可能,有没有办法在页面加载时将表单验证错误消息传递给表单?

谢谢!

1 个答案:

答案 0 :(得分:-2)

您可以将regex用于复杂的验证规则

首先向form.js添加一些代码,该文件可在以下位置访问:

语义-UI-主\语义-UI-主\ DIST \部件\ form.js

在此代码之后

// is most likely an email
email: function(value){
  var
    emailRegExp = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", "i")
  ;
  return emailRegExp.test(value);
},

添加此代码

// is most likely an my regex
regex: function(value,reg){
  var
    regexRegExp = new RegExp(reg, "i")
  ;
  return regexRegExp.test(value);
},

并在您的语义ui代码中使用它,就像这样

firstname: {
    identifier: "first_name",
    optional: true,
    rules: [
        {
            type: "regex[^[a-zA-Z -]+$]",
            prompt: "First name can only consist of letters, spaces and dashes"
        }
    ]
}

例如,这是我的代码,用于验证复杂鳕鱼只包含10位数字或混合字母

            $("form[data-id=\"2\"]").form({
                v: { identifier: 'active_code', rules: [{ type: "regex[^[a3-z8]{10}$]", prompt: 'کد فعال سازی خود را وارد کنید'}] }
            },
            {
                inline: true,
                on: 'blur',
                transition: 'swing left',
                duration: 1000,
                onSuccess: formOnSuccess
            }
            );

完整的代码

        $("form[data-id=\"1\"]").form({
            f: { identifier: 'family', rules: [{ type: 'empty', prompt: 'فامیلی خود را وارد کنید'}] },
            e: { identifier: 'email', rules: [{ type: 'email', prompt: 'ایمیل خود را وارد کنید'}] }
        },
            {
                inline: true,
                on: 'blur',
                transition: 'swing left',
                duration: 1000,
                onSuccess: formOnSuccess
            }
        );
        $("form[data-id=\"2\"]").form({
            v: { identifier: 'active_code', rules: [{ type: "regex[^[a0-z9]{10}$]", prompt: 'کد فعال سازی خود را وارد کنید'}] }
        },
            {
                inline: true,
                on: 'blur',
                transition: 'swing left',
                duration: 1000,
                onSuccess: loadPersonal
            }
        );