jquery扁平自适应网站html5模板近三天发生的重要新闻

上一篇我们介绍了用户注册的功能，注册的时候对密码进行了加密。除了密码加密外还需要验证账号的唯一性和密码强度的问题，本篇我们介绍一下如何在表单提交的时候增加自定义校验的能力。

1 必填校验

为了防止用户不录入信息，需要对表单的字段做必填校验。注册的时候我们要求用户必须录入手机号和密码

选择手机号字段，在属性面板里找到状态校验，把必填配置项打开

按照同样的配置方法，把密码的必填项配置也打开

2 验证密码强度

为了避免用户输入弱口令，导致被别人轻易猜出密码，在用户录入密码的时候我们要求输入高强度的密码

可以在校验规则里添加自定义规则

使用正则表达式进行校验

提示信息我们给出用户密码强度的符合规则

要求：密码必须包含至少一个数字、一个大写字母、一个小写字母、一个特殊字符（如 @, #, $ 等），总长度在 8-20 个字符之间

正则表达式的过滤规则是

^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$

3 账号唯一性校验

账号的唯一性校验需要根据当前输入的信息去数据库匹配，如果找到说明已经存在，如果未找到说明账号可用，这种的我们需要先定义自定义方法来实现

在代码区添加一个javascript方法


输入如下代码

export default async function({event, data}) {const phone = $w.inputPhone1.valueconst result = await $w.cloud.callDataSource({dataSourceName: "Users",methodName: "wedaGetRecordsV2",params: {// 筛选内容，当前筛选的含义为：名字为 "juli" 或者 "foo"filter: {where: {$and: [{sjh: {$eq: phone,},}],},},// 排序orderBy: [{createdAt: "asc", // 创建时间，正序}],// 返回字段选择select: {$master: true, // 常见的配置，返回主表},// 返回total字段getCount: true,// 页面大小pageSize: 1,// 当前页面pageNumber: 1,},});if(result.total>0){throw '手机号重复，请重新输入'}}

代码的逻辑是先从表单得到手机号，然后去用户表查询数据，如果返回数据，抛出错误，提示用户手机号重复

重新配置我们的表单提交方法，先调用我们的校验逻辑，然后再执行表单的提交逻辑

最终效果

如果未录入信息，提示必填

如果手机号重复，弹框提醒

如果密码强度不够，提示具体规则

总结

本篇我们介绍了表单容器各种校验实现的逻辑，在做数据录入的时候，必要的校验规则是需要考虑的，增强业务校验可以提高数据质量，在后续集成的时候也比较方便。