jquery+ajax实现前端新增和修改验证

<!--jquery+ajax前端验证代码-->

<script type="text/javascript">
        //用户名验证
        function checkUserName() {
            //由2-4个汉字组成
            var reg = /^[\u4e00-\u9fa5]{2,5}/;
            var name = $("[name=tname]").val();
            var nresult = reg.test(name);
            if (!nresult) {
                //邮箱不合法
                $("#nameMsg").html("姓名格式不正确");
                return false;
            }
            $("#nameMsg").html("");
            return true;
        }

        //验证qq
        function checkqq() {
            //由2-4个汉字组成
            var reg = /[1-9][0-9]{4,14}/;
            var qq = $("[name=tqq]").val();
            var qresult = reg.test(qq);
            if (!qresult) {
                //邮箱不合法
                $("#qqMsg").html("输入格式不正确!");
                return false;
            }
            $("#qqMsg").html("");
            return true;
        }

        //手机号验证
        function checkPassword() {
            //手机号码表达式
            var reg = /^1(3|4|5|7|8)\d{9}$/;
            //2.手机验证
            var phone = $("[name=tphone]").val();
            //获得异常输入框
            var phoneMsg = $("#phoneMsg");
            //匹配正则表达式
            var presult = reg.test(phone);

            //如果pwd的值为空
            if (phone == "" || phone.length != 11) {
                //1.2html属性赋值
                phoneMsg.html("请填写正确格式的手机号码!");
                return false;
            }

            if (!presult) {
                phoneMsg.html("手机号码的长度应为11位或者不符合中国电话号码规则");
                return false;
            }
            phoneMsg.html("");
            return true;
        }

        //检测邮箱
        function checkEmail() {
            var reg = /^\w+@\w+\.\w+$/;
            var email = $("[name=temail]").val();
            var result = reg.test(email);
            if (!result) {
                //邮箱不合法
                $("#emailMsg").html("邮箱不合法");
                return false;
            }
            $("#emailMsg").html("");
            return true;
        }

        $(function() {

            //当用户名失去焦点的时候,也要验证
            var username = $("[name=tname]");
            username.blur(function() {
                checkUserName();
            });

            var qq = $("[name=tqq]");
            qq.blur(function() {
                checkqq();
            });

            var phone = $("[name=tphone]");
            phone.blur(function() {
                checkPassword();
            });

            var email = $("[name=temail]");
            email.blur(function() {
                checkEmail();
            });

            //用户没有输入,不能提交
            //1.点击登录      触发的是表单的submit事件

            $("#sampleform").submit(function() {
                //1    三师兄    pass
                //2    二师兄    pass
                //3    大师兄    pass
                
                
                var sum = 0;
                if (!checkUserName()) {
                    sum = sum + 1;
                }
                if (!checkqq()) {
                    sum = sum + 1;
                }

                if (!checkPassword()) {
                    sum = sum + 1;
                }

                if (!checkEmail()) {
                    sum = sum + 1;
                }

                if (sum == 0) {
                    return true;
                } else {
                    return false;
                }

            });
        });
    </script>

<!--表單代碼 -->
<form id="sampleform" method="post" action="addRecord.do"  enctype="multipart/form-data">

					<ul class="forminfo">

						<li><label>姓名<b>*</b></label><input name="tname" id="tname"
							type="text" class="dfinput" value="" style="width:518px;" /><span
							style="color:red" id="nameMsg"></span></li>

						<li><label>性别<b>*</b></label> <input type="radio" id="tsex"
							value=1 name="tsex"   checked="checked"/>男 <input type="radio" id="tsex" value=2
							name="tsex" />女</li>


						<li><label>部门<b>*</b></label>
							<div class="usercity">
								<div class="cityleft">
									<select class="select2" name="tdept">
										<c:forEach items="${CONS}" var="cons">
											<option value="${cons.key}">${cons.value}</option>
										</c:forEach>
									</select>
								</div>

								<li><label>地址<b>*</b></label><input name="taddress"
									id="taddress" type="text" class="dfinput" value=""
									style="width:518px;" /></li>
								<li><label>手机号码<b>*</b></label><input name="tphone"
									id="tphone" type="text" class="dfinput" value=""
									style="width:518px;" /><span style="color:red" id="phoneMsg"></span></li>

								<li><label>电子邮箱<b>*</b></label><input name="temail"
									type="text" class="dfinput" value="" style="width:518px;" /><span
									style="color:red" id="emailMsg"></span></li>

								<li><label>qq<b>*</b></label><input name="tqq" id="tqq"
									type="text" class="dfinput" value="" style="width:518px;" /><span
									style="color:red" id="qqMsg"></li>
							</div></li>

						<li><label> </label><input name="submit" type="submit"
							id="submit" class="btn" value="马上创建" οnclick="destroy()"></li>
					</ul>
				</form>

 


  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值