jquery+ajax实现前端新增和修改验证
来源:互联网 发布:mac照片视频导出 编辑:程序博客网 时间:2024/06/03 15:57
<!--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;" /><spanstyle="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=2name="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;" /><spanstyle="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;" /><spanstyle="color:red" id="qqMsg"></li></div></li><li><label> </label><input name="submit" type="submit"id="submit" class="btn" value="马上创建" onclick="destroy()"></li></ul></form>
阅读全文
0 0
- jquery+ajax实现前端新增和修改验证
- jQuery+ajax实现修改密码验证
- jQuery+ajax实现修改密码验证
- jquery实现前端验证
- jquery实现ajax验证登录
- JQuery+Ajax实现登录验证
- php与前端(一):模态框的新增和修改
- ajax实现动态验证码验证(前端jsp页面)
- jquery validate和jquery form 插件组合实现验证表单后AJAX提交
- Bootstrapvalidator 前端自定义验证和ajax远程访问后端验证
- 使用jQuery实现AJAX帐号验证效果
- Struts2 Jquery Json 实现AJax表单验证
- Struts2 Jquery Json 实现AJax表单验证
- php+jquery+ajax实现用户名验证
- Jquery实现Ajax用户名实时验证
- JQuery.validate.js实现Ajax验证
- springmvc+jquery+ajax实现异步用户名验证
- php+jquery+ajax实现用户名验证
- 关于面试和学习方法的一篇好文章
- C++面试题(50—100)
- backbone 中require跟define的区别
- _IOR, _IOW解释
- java中异常的相关知识
- jquery+ajax实现前端新增和修改验证
- leetcode_228. Summary Ranges ? 待解决
- springmvc mybatis shiro构建cms+UC浏览器文章相关功能
- OAuth2笔记
- qt-everywhere-opensource-src-5.6.2 编译
- windows环境开机自启consul的配置
- [LeetCode]3. Longest Substring Without Repeating Characters
- libevent2.0网络通讯实例--luotuo44版本调试问题记录
- Cordova系列学习教程01. 了解Cordova