教程总目录

上一节：JBolt开发平台入门(19)-AutoSelect组件数据源定义详细使用教程

不管什么项目，只要你有表单，必定是需要进行数据校验的，否则后端需要一个int，你传了一个String过去，RuntimeException好吧。

所以，JBolt里内置了一整套前端表单控件自动校验的封装，只需要在html组件的标签上配置一个：
data-rule="required" 这样的校验规则就行了。

当然，触发校验也是有触发点的。
在Form表单里，监听一下表单的Onsubmit事件，提交前，进行一下表单输入校验即可。

在JBolt中配置很简单。

校验规则配置

再去看看Form上的配置：

form的配置

onsubmit=“return false”这样就去掉了默认的提交规则。和默认的触发提交规则。

在JBolt极速开发平台中form的模板里都引入这个

引入formjs.html

这个文件里封装了一套JS，是弹出的Dialog里点击确定按钮，默认执行内页中的定死的方法，相当于内页对外提供的接口。

执行这套js逻辑，处理重复提交，表单校验，ajaxSubmitform，返回值，执行等待进度，执行表单提交成功，执行失败，执行校验成功和失败等一系列JS操作的封装，省事儿，省心，极速开发。

data-rule怎么用

上面简单介绍了表单里控件配置data-rule就行了，表单只要被提交的时候就会触发自动校验。

可选规则

data-rule中可选规则就是这些，当然还可以自己扩展继续加，都是正则表达式。

有详细注释说明，一看就明白的

如果需要同时满足多个条件，需要怎么处理？

比如，一个输入框，需要填写正整数并且长度不能大于5
可以这样：
data-rule="pint;len<=5"
只要data-rule中有东西，默认就必须校验必填required。

如果这个输入框，只要填就只能填写正整数，否则不要填，可以不填

data-rule="pint" data-notnull="false"
此时需要两个配合，因为默认只要rule有内容就校验必填，但是你可以声明notnull=false
这样就不去校验了，如果你没填写的话。

如果我这个输入框输入的内容，需要同时等于另一个输入框输入的值，怎么写

这个例子常见于修改密码界面：

修改密码
校验结果

看看怎么配置的：

代码配置

理解起来并不难，就是整个输入框的校验规则是必填，并且等于#newPwd这个ID指向的元素的值。
然后给一个data-tips="两次输入密码不一致"就可以了。

更复杂的校验规则，例如通过ajax，执行后端查询校验的输入，这个也会提供的哦。

下一节：JBolt开发平台入门(21)-AutoSelect+select2+多选+隐藏域的高级用法

1024程序员节，抽奖活动，抽个奖，优惠加入组织。

1024程序员节活动