<!--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>
jquery+ajax实现前端新增和修改验证
最新推荐文章于 2022-08-30 16:32:52 发布