这篇文章主要为大家详细介绍了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像素
浮动：左；
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
