表单验证-JS实现
- //获取下一个span,可以通过这个对象给状态
- function gspan(cobj){
- while(true){
- if(cobj.nextSibling.nodeName!="SPAN")//因为有可能input标签后可能有空格再接span,或者中间有其它标签,但是我们要改的是span的内容,所以要获得input对应的span;
- cobj=cobj.nextSibling;
- else
- return cobj.nextSibling;
- }
- }
- /*
- 通用检查方法
- 第一个参数:obj, 是用来检查的对象
- 第二个参数:info, 是用来检查的提示信息
- 第三个参数: fun, 是一个回调函数,用来检查值是否按条件输入。因为一个变量不能解决判断是否value值符合要求,所以用函数作为参数。
- 第四个参数: click只是一个状态, 分清楚是单击提交按,还是失去焦点。因为check里面的离开焦点,在单击提交时每一个都没有离开焦点,所以不会调用check里面的离开焦点函数;
- */
- function check(obj, info, fun, click){
- var sp=gspan(obj);
- obj.onfocus=function(){ //一旦获得焦点,就要变提示信息以及颜色;
- sp.innerHTML=info;
- sp.className="stats2";//stats表示几个状态不同的字体颜色;
- }
- obj.onblur=function(){//一旦失去焦点,就要检查这个value值,通过fun回调函数。
- if(fun(this.value)){//如果符合规则,则回调函数返回真,提示信息变为“输入正确”并改变颜色;
- sp.innerHTML="输入正确";
- sp.className="stats4";
- }else{
- sp.innerHTML=info;
- sp.className="stats3";
- }
- }
- if(click=="click")//如果是单击提交按钮的,就手动条用onblur方法
- obj.onblur();
- }
- //页面加载完自动调用
- onload=regs
- //一个函数,可以使用onsubmit调用, 也可以使用onload调用
- function regs(click){
- var stat=true;//因为表单是否提交要通过判断其是否通过验证,返回stat给提交事件。
- var username=document.getElementsByName("username")[0];
- var password=document.getElementsByName("password")[0];
- var repass=document.getElementsByName("repass")[0];
- var email=document.getElementsByName("email")[0];
- var other=document.getElementsByName("other")[0];
- check(username, "用户名的长度要在3-20之间", function(val){
- if(val.match(/^\S+$/) && val.length >=3 && val.length <=20){
- return true;
- }else{
- stat=false;
- return false;
- }
- }, click);
- check(password, "密码必须在6-20位之间", function(val){
- if(val.match(/^\S+$/) && val.length >=6 && val.length <=20){
- return true;
- }else{
- stat=false;
- return false;
- }
- }, click);
- check(repass, "确定密码要和上面一致,规则也要相同", function(val){
- if(val.match(/^\S+$/) && val.length >=6 && val.length <=20 && val==password.value){
- return true;
- }else{
- stat=false;
- return false;
- }
- }, click)
- check(email, "要按邮箱规则输入", function(val){
- if(val.match(/\w+@\w+\.\w/)){
- return true;
- }else{
- stat=false;
- return false;
- }
- }, click)
- return stat;
- }
表单验证-JS实现的更多相关文章
- 表单验证—js循环所有表单验证
[封装为表单验证的专用js,所有表单页面都可以调用] 1.表单 <form id="regForm" method="post" action=" ...
- 最常用的15个前端表单验证JS正则表达式
在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份 ...
- 简单的表单验证(js、jquery)
//javascript代码 function valForm(){ var username=document.getElementById("username"); var p ...
- 一个自己实现的js表单验证框架。
经常要做一些表单验证的操作,每次都是用现成的框架,比如jquery,bootstrap等的验证插件,虽然也很强大,也很好用,可就是用起来需要引入许多js库,还有里面功能太多,感觉不太符合自己的需求.最 ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jquery validate表单验证插件的基本使用方法及功能拓展
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...
- jqury表单验证
结合天天生鲜的用户注册页面,学习验证表单js register.js--表单验证源码 $(function(){ var error_name = false; var error_password ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
随机推荐
- 将方法定义在prototype上的好处
通常js类定义和使用的是这样的: var Class=function(){}; Class.prototype.sharedFn=function(){}; var instanceA=new Cl ...
- an open source web server and reverse proxy
https://www.nginx.com/resources/admin-guide/ NGINX is an open source web server and reverse proxy th ...
- Ubuntu 系统下可以做什么?
ubuntu和windows到底有什么不同呢?从大的方面讲,它们的设计理念不同.借用一位知乎前辈说的“windows为不知道自己正在做什么的人设计,linux为知道自己要做什么,正在做什么的人设计”. ...
- 如何转换指定 波长 到 RGB 颜色?
//指定波长转换成RGBA颜色 std::vector<int> lambdaToColor(double lambda,double gamma = 0.8,double intensi ...
- linux增加 路由使两个不同的网段可以访问
举例:在交换机上有2个vlan 地址分别是192.168.10.1/24 192.168.20.1/24 2台server:一台A:server地址是192.168.10.3/24,一台B:serve ...
- Linux三种网络
Host-Only 桥接
- web.xml文件配置说明
web.xml作用: web.xml主要用来配置Filter.Listener.Servlet等,当我们去启动一个WEB项目时,容器(jetty.tomcat等)首先会读取项目web.xml配置文件里 ...
- 视频解码芯片SAA7111A的初始化
为了完成SAA7111A的初始化,FPGA需要完成I2C控制器的设计. 之前本科的时候初步接触过I2C,但是编写一个Verilog的控制器还是觉得有点难度的.说实话,那时候都无从下手,对实现这样一个协 ...
- 常用MS-SQL写法整理
这里整理日常会用到的一些写法,一些常规的group by,系统函数等用法不在这里做记录了,大家有什么好的写法也可以分享下 1 sql操作xml内容(sp_xml_preparedocument和ope ...
- Yii2 自定义独立验证器
新建一个文件: ?php /** * author : forecho <caizhenghai@gmail.com> * createTime : 2015/7/1 14:54 * de ...