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>

 

原创粉丝点击