项目实战第天:表单校验

核心提示今天是刘小爱自学Java的第101天。感谢你的观看,谢谢你。话不多说,开始今天的学习:一般来说绝大多数网站都会有用户注册、用户登录这些基本的功能。那么用户注册具体是如何实现的呢?这两天就主要学习注册的业务逻辑是如何写出来的。先做一个简单的业

今天是刘自学Java的第101天。

谢谢观看,谢谢。

事不宜迟,开始今天的学习吧:

一般来说,大部分网站都有用户注册和用户登录的基本功能。

那么用户注册是如何实现的呢?

这两天主要学习如何写注册的业务逻辑。

首先做一个简单的商业分析:

是注册用户自己填写相关信息,所以本质上是给数据库添加数据。

浏览器提交访问服务器的请求,服务器去数据库查询数据判断用户注册是否成功:

成功:发送邮件,跳转到相应页面,同时将用户提交的数据添加到数据库中。失败:比如用户名已经存在,需要提示用户注册失败的原因。画一个小图来说明:

以上是一个基本的注册业务逻辑。

当然这个方法是从后台检查用户提交的数据是否正确。其实也可以在前端先检查。

一、表单前端验证

前端验证可以优先判断,防止很多不必要的请求,比如:

用户名为空时,不能直接提交。邮箱是格式化的,不能随便填。手机号也是有对应格式的,不能随便填。如果用户填写的数据不符合相应的格式,就无法提交请求,这样也可以节省更多的资源。

因此,前端和后端有明确的分工:

前端验证数据的完整性和合法性。在后台检查数据的唯一性。还有前端怎么查?

使用jQuery表单验证工具验证:

①验证表单验证工具。

引入jquery.validate.js后,就可以使用这个工具了。

Register是与我的项目中的注册表相对应的id。您可以通过id选择器选择注册表单进行进一步验证。

②表单验证规则

规则可以定义表单的验证规则。

用户名和电子邮件:与表单中的属性相对应。必选:表示该属性对应的值不能是空。Email:表示邮箱对应的验证规则。当然,表单中的属性不止这两个,都需要验证。

我只是拿这两个做例子,不然属性太多,截图放不下,代码写的其实也差不多。

③用户自定义的错误信息

如果没有自定义消息,错误消息是英文的,所以使用messages将错误消息设置为相应的中文字符串。

第二,用户定义的验证规则

以上都是插件validate附带的验证规则,但是其中一些需要我们定制。

例如,电话号码因国家而异,因此您需要定义一个验证规则。

代码几乎一样,只是增加了自定义判断逻辑。

①自定义验证规则

我这里的自定义名是phoneFmt,下面的参数是:true。

也就是说需要满足相应的验证要求,否则会出现错误信息。

②addMethod方法

这种方法可以用来实现特定的检查逻辑,它有三个参数:

校验规则名称:即对应①中的名称。一个功能:即具体的检查逻辑。“非法手机号”:即错误信息。第二个参数,即函数,也有三个参数:

Value:要检查的文本框的值,指用户在电话栏中填写的数据。元素:选中规则的文本框,这里指的是整个电话标签。Params:接受校验规则参数,指①后为真。③特定的检查逻辑

新的正则表达式意味着创建一个相应的正则匹配规则。

至于正则表达式,很难完整地写下来,所以经常需要利用网络查询。

但是,即使网上有很多资源,你也要能看懂。查询信息如下:

数据通过用两个斜线://将特定的匹配规则括起来来创建正则表达式

我开始使用新的正则表达式,两种方式都可以。

“1 [34578] d {9} $”是什么意思?

1:表示第一个数字必须是1。[34578]:表示第二个数字必须是34578之一。D{9}$:表示还有9个数字,可以是任意数字。加起来一共11个号码,正好是我们国家手机号的长度。

以上是自定义检查规则的代码编写。

其实很多页面都需要这个规则,比如注册页面,登录页面。

在这种情况下,将其封装到一个js文件中。哪个页面需要使用此检查规则?只是介绍一下js文件:

以上是自定义验证规则的封装,有点类似于Java代码中工具类的封装。

最后

因为遇到了一个没有解决的bug,这两天学习效率有点低。希望能尽快调整好。

感谢您的观看。

如果可以,请给我一个赞。谢谢你。

 
友情链接
鄂ICP备19019357号-22