JBolt开发平台入门(20)-前端校验自动化使用教程

教程总目录

上一节: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程序员节活动

推荐阅读更多精彩内容