html验证富文本验证,amazeui支持html的验证也支持js的验证

amazeui支持html的验证也支持js的验证

如果表单只面向 H5 浏览器，而且不需要过多的控制，那原生的表单验证无疑是省时省力的选择，通过 :valid、:invalid 伪类可以控制不同验证状态的样式。

感兴趣的同学可以参考这里

https://www.sitepoint.com/html5-form-validation/

此外支持JS 表单验证

主要包含下面的一些验证

required: 必填；

pattern: 验证正则表达式，插件内置了 email、url、number 三种类型的正则表达式；

minlength/maxlength: 字符限制；

min/max: 最小、最大值限制，仅适用于数值类型的域；

minchecked/maxchecked: 至少、至多选择数，适用于 checkbox、下拉多选框，checkbox 时将相关属性的设置在同组的第一个元素上；

.js-pattern-xx: 验证规则 class，正则库中存在的规则可以通过添加相应 class 实现规则添加。

比如我们限制输入框的字数长度

标题

备注

限制输入的是数字

排序

限制是邮箱地址和URL地址

单选框 多选框 下拉框等必填

爱好：

橘子

苹果

菠萝

芒果

香蕉

性别：

男

女

其他

下拉单选框

-=请选择一项=-

选项一...

选项二.....

选项三........

多选框

1

2

3

4

5

评论：

还有文本框也必填等

另外如果我们想让错误信息显示在不同的位置，比如我们想错误信息像是在文本框的下面

底部显示提示信息

通过插件的 .onValid 和 onInValid 回调接口，可以根据需要定提示信息显示。

添加下面的js事件 这样就可以把错误信息显示在想要的位置了

$(function() {

$('#doc-vld-msg').validator({

onValid: function(validity) {

$(validity.field).closest('.am-form-group').find('.am-alert').hide();

},

onInValid: function(validity) {

var $field = $(validity.field);

var $group = $field.closest('.am-form-group');

var $alert = $group.find('.am-alert');

// 使用自定义的提示信息 或 插件内置的提示信息

var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

if (!$alert.length) {

$alert = $('

appendTo($group);

}

$alert.html(msg).show();

}

});

});

还可以使用等值比较，比如密码和确认密码要相同

密码：

确认密码：

自定义验证

插件预置的功能不可能满足各异的需求，通过 validate 选项，可以自定义验证规则，如远程验证等。

Validator 可以和 UEditor 富文本编辑器结合使用。