基于Jquery实现表单验证
作者:xiaole0313 发布时间:2023-07-02 05:31:08
标签:jquery,表单验证
有时在我们注册账户、登陆系统时,当所有验证通过方可提交 这就需要Jquery来实现表单验证,今天分享给小伙伴们一段基于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>
</html>
0
投稿
猜你喜欢
- 下面一段代码给大家分享php未登录自动跳转到登录页面,具体代码如下所示:<?php namespace Home\Controller
- 网上学习了的两个新方法,代码非常之简洁。看来,不是只要实现了基本功能就能交差滴,想要真的学好python还有很长的一段路呀方法一:是利用ma
- 前言首先,我们开发的项目会有多个版本.其次,我们的项目版本会随着更新越来越多,我们不可能因出了新版本就不维护旧版本了.那么,我们就需要对版本
- 本文实例讲述了kNN算法python实现和简单数字识别的方法。分享给大家供大家参考。具体如下:kNN算法算法优缺点:优点:精度高、对异常值不
- //1、运行到C盘根目录 //2、输入:SET ORACLE_SID = 你的SID名称 3、输入:sqlplus/nolog 4、输入:c
- MS SQL Server查询优化方法查询速度慢的原因很多,常见如下几种 1、没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的
- 1. 正则表达式基础1.1. 简单介绍正则表达式并不是Python的一部分。正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个
- 一、Ajax 跨域请求Ajax 请求一个目标地址为非本域(协议、主机、端口任意一个不同)的 web 资源。前端http://192.168.
- 可能大家在日常工作中会遇到这么个问题,现在基本的linux系统都是自带老版本的python2.7.x版本,我又不想用老版本,但直接升级可能会
- 如下所示:#coding=utf8import csv import logginglogging.basicConfig(level=lo
- 前言你知道a**3是什么意思吗?你知道怎么打印模块路径吗?你知道reduce()函数怎么用和列表怎么拼接字符串吗?然而你可能全都知道但是还是
- Python提供了多个内置模块用于操作日期时间,像calendar,time,datetime。time模块我在之前的文章已经有所介绍,它提
- 本文实例讲述了Python List列表对象内置方法。分享给大家供大家参考,具体如下:前言在上一篇中介绍了Python的序列和String类
- 一、中间键的引入:Django中间件(Middleware)是一个 轻量级、底层的 “插件”系 统,可以介入 Django的请求和响应处理过
- 前言可扩展标记语言,是一种简单的数据存储语言,XML被设计用来传输和存储数据存储,可用来存放配置文件,例:java配置文件传输,网络传输以这
- 关于这个问题的解答,网络上有成千上万个版本,当然,出现问题的诱因不同,解决的途径也不同,所以我不排除其他解决此类问题的办法,但是这些办法都没
- 项目开发中hadoop一直装在虚拟机上,最近要迁移到服务器上。记录下迁移过程。一、为虚拟机添加一块新的硬盘虚拟机的初始硬盘只有30G,容不开
- range(x)range(9) 代表着0、1、2、3、4、5、6、7、8 这九个顺序数字的集合。也就是 range(9) => ra
- 本文通过一个详细的例子,来阐述了在线编辑XML文档数据的方法。由于Netscape对XML的支持比较弱,因此,要实现跨平台的数据交换,数据的
- <%@ page language="java" import="java.util.*" p