这篇文章主要为大家详细介绍了jQuery实现表单验证功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery表单验证实例/包含用户名、密码、住址、邮箱验证
如下图
别忘了引入jQuery框架！
话不多说直接先上jQuery部分代码：
脚本类型='文本/javascript '
$(文档)。ready(function(){
var tip1='span class='span1 '用户名不能为空！/span '；//声明发生错误时在输入框后面添加的跨度
var tip2='span class='span2 '邮箱格式错误或不能为空！/span '；
var tip3='span class='span3 '地址不能为空！/span '；
var tip4='span class='span4 '密码长度不能小于五位且最多为十位！/span '；
定义变量条件=/^([\.a-zA-Z0-9 _-])@([a-zA-Z0-9 _-])(.[a-zA-Z0-9 _-])/；//声明判定邮箱格式的条件
$('.id’).blur(function(){
如果(!$('.id’).val()){//判定用户名非空
$(' span 1 ').移除();
$('.id’).之后(提示1)；
}
否则{
$(' span 1 ').移除();
}
});
$('.电子邮件)。blur(function(){
如果(!condition.test($(' .电子邮件)。val())){//判定邮箱格式
$(' span 2 ').移除();
$('.电子邮件)。之后(技巧二)；
}
否则{
$(' span 2 ').移除();
}
});
$('.地址)。blur(function(){
如果(!$('.地址)。val()){//判定地址非空
$(' span 3 ').移除();
$('.地址)。之后(技巧三)；
}
否则{
$(' span 3 ').移除();
}
});
$('.pwd’).blur(function(){
如果($('。pwd’).val().长度5||$('。pwd’).val().长度10){//判定密码长度不能小于5位且不能大于10位
$(' span 4 ').移除();
$('.pwd’).之后(提示4)；
}
否则{
$(' span 4 ').移除();
}
});
$('.按钮)。单击(function(){//符合所有条件则弹出弹窗表单验证通过，如果不符合则弹出弹窗提醒用户更改
如果(!$('.id’).val()||！condition.test($(' .电子邮件)。val())||！$('.地址)。val()||$(' .pwd’).val().长度5||$('。pwd’).val().长度10){
警报('注册信息有误，请更改个人信息');
}
否则{
警报('注册成功');
}
})
})
/脚本
结构和样式：
div class='main_box '
div class='title '
欢迎注册原魔
/div
div class='box '
img alt='插图src=' ./img/可莉派萌' png' class='img '
形式
用户名：input class='id' type='text' br
邮emsp箱：input class=' email ' type=' text ' br
地emsp址：input class=' address ' type=' text ' br
密emsp码：input class=' pwd ' type=' password ' br
按钮类型='button' class='button '注emspemsp册/按钮
/表单
/div
/div
跨度{
颜色：白色；
}
正文{
字体系列：无衬线字体；
}。main_box{
宽度：100%;
身高：910像素
背景色：红色；
背景图像：线性渐变(#e66465，# 000000)；
}。标题{
字体大小：5em
颜色：白色；
宽度：100%;
高度：100像素
文本对齐：居中；
}。方框{
宽度：1050像素
身高：310像素
边距：150像素自动50像素自动
左填充：360像素
}
输入{
高度：40px
宽度：200像素
边框半径：20px
边框：纯色1px # B5B5B5
边距：10px
字号：1.2em
}
表单{
颜色：白色；
字号：1.2em
浮动：左；
左边距：50px
}。按钮{
宽度：280像素
高度：40px
背景色：# 9781FD
边框半径：25px
颜色：白色；
字号：1.3毫米
字体粗细：700;
页边距-顶部：10px
}。img{
宽度：310像素
身高：310像素
浮动：左；
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。