表单校验 - 表单校验的实现案例

最新推荐文章于 2024-04-20 14:59:10 发布

不想懂得Zenith

最新推荐文章于 2024-04-20 14:59:10 发布

阅读量2.1k

点赞数 2

分类专栏： function 文章标签： function form check blur

本文链接：https://blog.csdn.net/weixin_42629433/article/details/83316072

版权

function 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

基于对数据表的 CRUD 操作, 我们可以在增加/修改时, 对表单添加相应的校验功能.

比如: 用户输入的手机号不符合规则时提示用户重新输入正确的手机号; 用户输入的邮箱账号不存在或者已经被其他用户使用过也提示错误信息.

下面我们针对填写员工姓名和选择性别时, 做出相应的正则校验. 如果用户输入的姓名不符合正则表达式, 提示错误信息, 并且不能提交表单数据到后台; 同样, 如果用户没有选择性别时, 提示错误信息, 并且不能提交表单数据到后台!

我们还是基于上一篇文章进行编写: https://blog.csdn.net/weixin_42629433/article/details/83241131

一. 姓名输入框的校验以及提交表单的校验

1. 首先我们在需要校验的 form 表单中的输入框中添加一个 id 的属性, 值可以自定义, 但是要见名知义. 在姓名输入框内添加 id 属性, 属性值我们可以定义为 name ; 其次在 form 单上也要添加一个 id 的属性, 值也可以自定义, 我们定义为 addForm :

<%--添加表单--%>
<form action="${pageContext.request.contextPath}/emp/addEmp.do" id="addForm" method="post">
    <!-- 正文区域 -->
    <section class="content">

        <%--员工信息--%>
	    <div class="panel panel-default">
		    <%--用户输入的员工信息表--%>
		    <div class="row data-type">

			    <div class="panel panel-default">
				    <div class="panel-heading">员工信息</div>
				    <div class="row data-type">

					    <div class="col-md-2 title">姓名</div>
					    <div class="col-md-4 data">
						    <input type="text" class="form-control" name="name" id="name" placeholder="姓名" value="">
					    </div>

					    <div class="col-md-2 title">性别</div>
					    <div class="col-md-4 data">
					        <select class="form-control select2" style="width: 100%" name="gender">
							    <option value="man" selected="selected">男</option>
							    <option value="woman">女</option>
						    </select>
					    </div>

					    <div class="col-md-2 title">年龄</div>
					    <div class="col-md-4 data">
						    <input type="text" class="form-control" name="age" placeholder="年龄" value="">
					    </div>

					    <div class="col-md-2 title">生日</div>
					    <div class="col-md-4 data">
						    <div class="input-group date">
							    <div class="input-group-addon">
								    <i class="fa fa-calendar"></i>
							    </div>
						        <input type="text" class="form-control pull-right" name="birthday">
						    </div>
					    </div>

					    <div class="col-md-2 title">婚否</div>
					    <div class="col-md-4 data">
						    <select class="form-control select2" style="width: 100%" name="marry">
						        <option value="1" selected="selected">单身</option>
						        <option value="2">已婚</option>
						    </select>
					    </div>

					    <div class="col-md-2 title">邮箱</div>
					    <div class="col-md-4 data">
						    <input type="text" class="form-control" name="email" placeholder="邮箱账号" value="">
					    </div>

					    <div class="col-md-2 title">部门</div>
					    <div class="col-md-4 data">
						    <select class="form-control select2" style="width: 100%" name="deptId">
						        <option value="1" selected="selected">1</option>
							    <option value="2">2</option>
							    <option value="3">3</option>
							    <option value="4">4</option>
							    <option value="5">5</option>
						    </select>
					    </div>

				    </div>
			    </div>

			    <%--保存 / 返回 按钮--%>
			    <div class="box-tools text-center">
				    <button type="submit" class="btn bg-maroon">保存</button>
				    <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
			    </div>

			</div>

		</div>

	</section>

</form>

2. 在 <script> </script> 标签中通过定义的 id 值获取到相应的对象, 进行事件绑定操作:

<script>

    //校验姓名
    function checkName() {
        //获取输入的员工姓名的值
        var name = $("#name").val();
        //定义校验输入员工姓名的正则表达式 - 单词字符 8-20位
        var reg_name = /^\w{8,20}$/;
        //判断输入的员工的姓名是否符合规则
        var flag = reg_name.test(name);
        if(flag){  //符合规则
            // alert("姓名符合规则!");
            $("#name").css("border","1px solid green");
        } else { //不符合规则
            alert("姓名不符合规则!");
            $("#name").css("border","1px solid red");
        }
        return flag;
    }

    //提交表单时检验所有表单中填写的信息
    $(function () {
        $("#addForm").submit(function () {
            var flag = checkName() ;
	    //如果表单校验全部通过
            if(flag){
                //获取表单中所有数据
                // alert("信息审核通过!");
            } else {
                alert("输入信息有误!");
                //阻止提交
                return false;
            }
        });
        //添加离焦事件
        $("#name").blur(checkName);
    });

</scrept>

当用户输入的员工姓名不符合正则规则时, 会离焦提示姓名不符合规则! 并且点击提交也会提示输入信息有误! form 表单中的数据无法提交到后台, 除非在添加了表单校验的输入框中输入符合校验要求的数据后, 离焦才不会报错, 并且可以将数据顺利提交到后台处理.

二. 姓名输入框和性别选择框的校验以及提交表单的校验

1. 基于上述的操作, 同样我们在性别选择框内添加 id 属性, 属性值我们可以定义为 sex.

选择框和文本输入框不同的区别是: 选择框有多个 <option> </option> 标签, 该标签内有 value 属性, 选择了哪个 <option> </option> 标签, 性别的 value 值对应的就是哪个 <option> </option> 标签内的 value 属性所设置的属性值;

该 <option> </option> 标签内有一个 select=secected 的属性以及对应的属性值, 意思是默认选中.

我们可以把默认选中的 <option> </option> 标签内的 value 属性给一个自定义的属性值, 我给 onSelect, 意思是默认没有选择:

<%--添加表单--%>
<form action="${pageContext.request.contextPath}/emp/addEmp.do" id="addForm" method="post">

    <!-- 正文区域 -->
    <section class="content">

        <%--员工信息--%>
        <div class="panel panel-default">
            <%--用户输入的员工信息表--%>
            <div class="row data-type">

                <div class="panel panel-default">
                    <div class="panel-heading">员工信息</div>
                    <div class="row data-type">

                        <div class="col-md-2 title">姓名</div>
                        <div class="col-md-4 data">
                            <input type="text" class="form-control" name="name" id="name" placeholder="姓名" value="">
						</div>

						<div class="col-md-2 title">性别</div>
						<div class="col-md-4 data">
							<select id="sex" class="form-control select2" style="width: 100%" name="gender">
							    <option value="noSelect" selected="selected"><--请选择--></option>
								<option value="man">男</option>
								<option value="woman">女</option>
							</select>
						</div>

						<div class="col-md-2 title">年龄</div>
						<div class="col-md-4 data">
						    <input type="text" class="form-control" name="age" placeholder="年龄" value="">
						</div>

						<div class="col-md-2 title">生日</div>
						<div class="col-md-4 data">
							<div class="input-group date">
						        <div class="input-group-addon">
							    	<i class="fa fa-calendar"></i>
								</div>
								<input type="text" class="form-control pull-right" id="datepicker-a3" name="birthday">
							</div>
						</div>

						<div class="col-md-2 title">婚否</div>
						<div class="col-md-4 data">
							<select id="marry" class="form-control select2" style="width: 100%" name="marry">
								<option value="noSelect" selected><--请选择--></option>
								<option value="1">未婚</option>
								<option value="2">已婚</option>
							</select>
						</div>

						<div class="col-md-2 title">邮箱</div>
						<div class="col-md-4 data">
							<input type="text" class="form-control" name="email" placeholder="邮箱账号" value="">
						</div>

						<div class="col-md-2 title">部门</div>
						<div class="col-md-4 data">
							<select id="deptId" class="form-control select2" style="width: 100%" name="deptId">
								<option value="noSelect" selected="selected"><--请选择--></option>
								<option value="1">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
								<option value="4">4</option>
								<option value="5">5</option>
						    </select>
						</div>

					</div>
				</div>

				<%--保存 / 返回 按钮--%>
				<div class="box-tools text-center">
					<button type="submit" class="btn bg-maroon">保存</button>
					<button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
				</div>

			</div>

		</div>

	</section>

</form>

2. 在 <script> </script> 标签中通过定义的 id 值获取到相应的对象, 进行事件绑定操作:

<script>

    //校验姓名
    function checkName() {
        //获取输入的员工姓名的值
        var name = $("#name").val();
        //定义校验输入员工姓名的正则表达式 - 单词字符 8-20位
        var reg_name = /^\w{8,20}$/;
        //判断输入的员工的姓名是否符合规则
        var flag = reg_name.test(name);
        if(flag){  //符合规则
            // alert("姓名符合规则!");
            $("#name").css("border","1px solid green");
        } else { //不符合规则
            alert("姓名不符合规则!");
            $("#name").css("border","1px solid red");
        }
        return flag;
    }

    //校验性别
    function checkSex(){
        var sex = $("#sex").val();
        if('noSelect' == sex){
            alert("请选择性别!");
            return false;
		} else {
            return true;
		}
	}

    //提交表单时检验所有表单中填写的信息
    $(function () {
        $("#addForm").submit(function () {
        //依次判断 false 则断路
        var flag = checkName() && checkSex();
		//如果表单校验全部通过
        if(flag){
        //获取表单中所有数据
        //var param = $("#addForm").serialize();
        //alert("信息审核通过!");
        } else {
            alert("输入信息有误!");
            //阻止表单提交
            return false;
        }
        });
        //添加离焦事件
        $("#name").blur(checkName);
    });

</script>

当用户输入的员工姓名符合了正则规则, 却没有选择性别选项时, 点击提交会提示请选择性别! form 表单中的数据无法提交到后台, 除非在添加了表单校验的选择框中选择符合校验要求的数据后才可以将数据顺利提交到后台处理.

代码下载: https://pan.baidu.com/s/1AkU2oGSZpfa736Zt23Y63w

***此代码需在 jdk1.8 下运行使用***

不想懂得Zenith

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
表单校验 - 表单校验的实现案例

基于对数据表的 CRUD 操作, 我们可以在增加/修改时, 对表单添加相应的校验功能. 比如: 用户输入的手机号不符合规则时提示用户重新输入正确的手机号; 用户输入的邮箱账号不存在或者已经被其他用户使用过也提示错误信息.下面我们针对填写员工姓名和选择性别时, 做出相应的正则校验. 如果用户输入的姓名不符合正则表达式, 提示错误信息, 并且不能提交表单数据到后台; 同样, 如果用...
复制链接

扫一扫