实战课【1】jQuery实现表单校验及布局

最新推荐文章于 2024-09-18 19:26:48 发布

细则

最新推荐文章于 2024-09-18 19:26:48 发布

阅读量214

点赞数

分类专栏： JavaWeb基础项目旅游网实战文章标签：正则表达式 jquery java css js

本文链接：https://blog.csdn.net/qq_42744046/article/details/105482497

版权

JavaWeb基础项目旅游网实战专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实战课【1】jQuery实现表单校验及布局

在学习完html,css,js,mysql,jdbc,Servlet,filter,ajax,maven等web基础知识后，开始进行项目实战。此文就会记录在实战过程中所遇到的问题和一些经验。

表单校验流程

通过使用jQuery框架，在提交到servle之前就进行表单校验可以为服务器进行‘减负’，另外用户可以迅速的看到自己所输入的数据是否符合要求。这样的需求实现起来非常简单，入口函数内对表单提交按钮和每个表单项分别注册提交及离焦事件，事件内是check***函数，负责检测是否合乎正则表达式。

	$(function () {

				$("#register").submit(function () {
					return checkUsername() && checkPassword() && ...;
				});
				$("#username").blur(function () {
					return checkUsername();
				});
				...

	});
	function checkUsername() {
				var username = $("#username").val();
				// 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)
				var reg_username = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
				var flag = reg_username.test(username);
				if(flag){
					//用户名合法
					$("#username").css("border","1px solid black");
					$(".td_username").html("<img class='gou' src='images/gou.png'>");
					$("#error_username").html("");
					// return true;
				}else{
					//用户名非法，css样式设置为红色 并且给提示信息
					$("#username").css("border","1px solid red");
					$(".td_username").html("");
					$("#error_username").html("<h5>字母开头，5-16字节，允许字母数字下划线</h5>");
					// return false;
				}
				return flag;
			};

这里有一个特别值得注意的细节，那就是flag的值本身就是Boolean类型的数据，所以可以直接作为返回值，不用再特意的去写return true or false。这样处理会让代码更加简洁。

正则表达式

这里分析判断邮箱的正则表达式：

必须记住的规则：+出现一次或多次 ？出现零次或一次 *出现零次或一次或多次
	var reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
	匹配【大小写字母、数字、下划线】一个或多个 
	匹配（- + . 任意一个 后面跟随 一个或多个【大小写字母、数字、下划线】）前面这种形式0个或1个或多个
	匹配@
	匹配【大小写字母、数字、下划线】一个或多个
	匹配【-.任意一个 后面跟随【大小写字母、数字、下划线】一个或多个】这种形式0个或1个或多个
	匹配.后面跟随一个或多个字母
	匹配【-或. 后面跟随一个或多个字母】这种形式出现0次 1次 或 多次
    _@_.com
    __a@_.com
    __a@_.acom
    以上都是可以的

关于布局，验证的信息怎样恰当的展示给用户

效果可以看到，提示的错误信息在输入框的正下方，这是怎样做到的呢？可以想象成两个高度不同的输入框，并且全部都是向右浮动，这样提示信息就会和输入框是一致的，另外，对勾图片一定要设置合适的宽和长，越小的宽和长对整体的布局影响就会越小。
在这里插入图片描述

    /*父选择器：选择子类input type=text的父类class=rg_form_center*/
    .rg_form_center .td_right > input[type="text"],.rg_form_center .td_right > input[type="date"]{
        width: 256px;
        height: 32px;
        line-height: 32px;
        box-sizing: border-box;
        padding: 6px 12px;
        border-radius: 4px;
        border:1px solid #a6a6a6;
        float: right;
    }
    .rg_form .rg_form_center .td_right .error{
        color: red;
        /*长度要求和input[type="text"]是一致的 且向右边浮动*/
        width: 256px;
        height: 8px;
        float: right;
        font-size: 3px;
    }