博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jq实战-表单验证
阅读量:5292 次
发布时间:2019-06-14

本文共 1776 字,大约阅读时间需要 5 分钟。

作为学习的记录,方便大家查看,废话不多说,直接上代码

html 结构:

 

jq代码:

$("form :input.required").each(function(){        var $required = $('*');        $(this).parent().append($required);    });    $("form :input").blur(function(){        var $parent = $(this).parent();        $parent.find(".formtips").remove(); //删除多余重复        // 验证用户名        if($(this).is('#username')){            if(this.value == ""|| this.value.length<6 ){                var errorMsg = "请输入6位用户名" ;                $parent.append($(''+errorMsg+''));            }else{                var okMsg = "输入正确";                $parent.append($(''+okMsg+''));            }        }        // 验证邮箱        if($(this).is('#email')){            if(this.value == "" ){ //|| (this.value!="" && !/.+@.+\.[a-zA-Z] {2,4}$/.test(this.value)                var errorMsg = "请输入正确的E-mail" ;                $parent.append($(''+errorMsg+''));            }else{                var okMsg = "输入正确";                $parent.append($(''+okMsg+''));            }        }    }).keyup(function() {        $(this).triggerHandler('blur');    }).focus(function(){        $(this).triggerHandler('blur');    });    $("#send").click(function(){        $("form .required:input").trigger('blur');        var numError = $("form .onError").length;        var $id = $("form .onError").prevAll(".required").attr("id");        if(numError){            if(numError > 1){                $("#username").focus();            }else if($id == "email"){                $("#email").focus();        }            return false;        }        alert("注册成功,密码已发送到你的邮箱,请查收");    });

 

学习代码是需要多跑几遍的!

转载于:https://www.cnblogs.com/pangzi666/p/5074470.html

你可能感兴趣的文章
HDU4405--Aeroplane chess(概率dp)
查看>>
python使用easyinstall安装xlrd、xlwt、pandas等功能模块的方法
查看>>
CS0103: The name ‘Scripts’ does not exist in the current context解决方法
查看>>
20130330java基础学习笔记-语句_for循环嵌套练习2
查看>>
Spring面试题
查看>>
窥视SP2010--第一章节--SP2010开发者路线图
查看>>
MVC,MVP 和 MVVM 的图示,区别
查看>>
C语言栈的实现
查看>>
代码为什么需要重构
查看>>
TC SRM 593 DIV1 250
查看>>
SRM 628 DIV2
查看>>
2018-2019-2 20165314『网络对抗技术』Exp5:MSF基础应用
查看>>
统计单词,字符,和行
查看>>
jQuery垂直滑动切换焦点图
查看>>
Python-S9-Day127-Scrapy爬虫框架2
查看>>
模运算
查看>>
python多线程的使用
查看>>
团队编程项目作业1-成员简介及分工
查看>>
使用Chrome(PC)调试移动设备上的网页
查看>>
UI基础--手写代码实现汤姆猫动画
查看>>