Jquery 表单验证
<html>
<head>
<meta http-equiv=
"content-type"
content=
"text/html; charset=utf-8"
>
<title>Reg</title>
<style>
.state1{
color:#aaa;
}
.state2{
color:#000;
}
.state3{
color:red;
}
.state4{
color:green;
}
</style>
<script src=
"jquery.js"
></script>
<script>
$(
function
(){
var
ok1=false;
var
ok2=false;
var
ok3=false;
var
ok4=false;
// 验证用户名
$(
'input[name="username"]'
).focus(
function
(){
$(this).next().text(
'用户名应该为3-20位之间'
).removeClass(
'state1'
).addClass(
'state2'
);
}).blur(
function
(){
if
($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=
''
){
$(this).next().text(
'输入成功'
).removeClass(
'state1'
).addClass(
'state4'
);
ok1=true;
}
else
{
$(this).next().text(
'用户名应该为3-20位之间'
).removeClass(
'state1'
).addClass(
'state3'
);
}
});
//验证密码
$(
'input[name="password"]'
).focus(
function
(){
$(this).next().text(
'密码应该为6-20位之间'
).removeClass(
'state1'
).addClass(
'state2'
);
}).blur(
function
(){
if
($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=
''
){
$(this).next().text(
'输入成功'
).removeClass(
'state1'
).addClass(
'state4'
);
ok2=true;
}
else
{
$(this).next().text(
'密码应该为6-20位之间'
).removeClass(
'state1'
).addClass(
'state3'
);
}
});
//验证确认密码
$(
'input[name="repass"]'
).focus(
function
(){
$(this).next().text(
'输入的确认密码要和上面的密码一致,规则也要相同'
).removeClass(
'state1'
).addClass(
'state2'
);
}).blur(
function
(){
if
($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=
''
&& $(this).val() == $(
'input[name="password"]'
).val()){
$(this).next().text(
'输入成功'
).removeClass(
'state1'
).addClass(
'state4'
);
ok3=true;
}
else
{
$(this).next().text(
'输入的确认密码要和上面的密码一致,规则也要相同'
).removeClass(
'state1'
).addClass(
'state3'
);
}
});
//验证邮箱
$(
'input[name="email"]'
).focus(
function
(){
$(this).next().text(
'请输入正确的EMAIL格式'
).removeClass(
'state1'
).addClass(
'state2'
);
}).blur(
function
(){
if
($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
$(this).next().text(
'请输入正确的EMAIL格式'
).removeClass(
'state1'
).addClass(
'state3'
);
}
else
{
$(this).next().text(
'输入成功'
).removeClass(
'state1'
).addClass(
'state4'
);
ok4=true;
}
});
//提交按钮,所有验证通过方可提交
$(
'.submit'
).click(
function
(){
if
(ok1 && ok2 && ok3 && ok4){
$(
'form'
).submit();
}
else
{
return
false;
}
});
});
</script>
</head>
<body>
<form action=
'do.php'
method=
'post'
>
用 户 名:<input type=
"text"
name=
"username"
>
<span
class
=
'state1'
>请输入用户名</span><br/><br/>
密 码:<input type=
"password"
name=
"password"
>
<span
class
=
'state1'
>请输入密码</span><br/><br/>
确认密码:<input type=
"password"
name=
"repass"
>
<span
class
=
'state1'
>请输入确认密码</span><br/><br/>
邮 箱:<input type=
"text"
name=
"email"
>
<span
class
=
'state1'
>请输入邮箱</span><br/><br/>
<a href=
"javascript:;"
><img
class
=
'submit'
type=
'image'
src=
'./images/reg.gif'
/></a>
</form>
</body>
Jquery 表单验证的更多相关文章
- 【jquery】Validform,一款不错的 jquery 表单验证插件
关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- python_way day17 jQuery表单验证,事件绑定,插件,文本框架,正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- jquery表单验证使用插件formValidator
JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- jQuery表单验证以及将表单序列化为json对象小练习
jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...
- JQuery 表单验证--jquery validation
jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
- jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...
- jQuery表单验证案例
目标:使用jQuery进行表单验证. 功能:1.必填选项后面添加了红色小星星: 2.选中开始输入时,输入文本框会改变当前背景色,增强用户体验: 3.输入的时候就开始验证,当输入格式正确就会提醒,就是当 ...
随机推荐
- DUILIB 实现微信气泡聊天效果
最近由于项目原因,需要做一个产品内嵌的IM聊天系统.而且要象微信类似的效果:界面也要比较炫: 开始考虑用MFC,但MFC的控件自绘很麻烦,后来又考虑QT,倒是使用控件使用方便,但QT库太大,所以也放弃 ...
- scp详解
scp 命令 ================== scp 可以在 2个 linux 主机间复制文件: 命令基本格式: scp [可选参数] file_source file_targe ...
- silverlight控件阴影效果示例
<ScrollViewer MaxHeight="400" VerticalScrollBarVisibility="Auto" HorizontalSc ...
- 微信App支付通知验签
微信异步通知: [AcceptVerbs("POST")] public void Notify() { //编码(101-登录无效,102-账号无效,200-成功,201-失败, ...
- ABAP 读取EXCEL文件到内表
1.选择excel文件: PARAMETERS: P_FILE LIKE RLGRAP-FILENAME OBLIGATORY. AT SELECTION-SCREEN ON VALUE-REQUES ...
- sql数据查询,在程序中较慢,在MS SQL2005 Management Studio中速度快,情况分析及解决
这两天遇到一个问题,在.net开发的网站,执行sql查询,从sql profiler中监控卡看,执行时间22s. 但是拷出的sql在Management Studio中直接执行,时间仅4ms. 解决方 ...
- Linux系统编程重要细节记录(持续更新中)
1.在打印rlim_t值时,需要将其转换为long long并使用%lld printf()修饰符.
- REDIS源码中一些值得学习的技术细节01
redis.c/exitFromChild函数: void exitFromChild(int retcode) { #ifdef COVERAGE_TEST exit(retcode); #else ...
- VBA常用函数
字符串相关: ①截取字符串: 从字符串左侧开始:Left(string,length) 从字符串右侧开始:Right(string,length) 从字符串中间开始:mid(string,start, ...
- inndb存储引擎调优
inndb存储引擎调优介绍: InnoDB给MySQL提供了具有提交,回滚和崩溃恢复能力的事务安全(ACID兼容)存储引擎.InnoDB锁定在行级并且也在SELECT语句提供一个Oracle风格一致的 ...