首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

最原始的jQuery注册验证方式

Posted in Javascript onOctober 11, 2016

这里介绍的第一个是最原始的表单验证方式，即没有使用即时验证，需要点击提交按钮才进行验证，也没有使用正则表达式或者AJAX验证，也或者是JQuery的验证，不过这么多验证方式接着第一个后面都会写出来的，即时验证，正则验证。
最原始的注册验证方式，需要通过点击提交按钮才验证，具体内容如下

先上图：

最原始的jQuery注册验证方式

具体代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
</head> 
 
<body> 
<div id="content"> 
 <!--首页的中间部分--> 
<SCRIPT language="javascript" type="text/javascript"> 
//checkUserName() && sNameCheck() && passCheck() && bdaycheck() && genderCheck() && emailcheck() && 
function validateform(){ 
 if(checkUserName() && sNameCheck() && passCheck()&& emailcheck() && bdaycheck() && genderCheck() && agree( )) 
  return true; 
  else 
  return false; 
  
  
} 
 //validate Name 
function checkUserName(){ 
var fname = document.userfrm.fname.value; 
var lname = document.userfrm.lname.value; 
// validate first Name 
if(fname.length != 0){ 
 for(i=0;i<fname.length;i++){ 
 var ftext = fname.substring(i,i+1); 
  if(ftext < 9 || ftext > 0){ 
   alert("名字中包含数字 \n"+"请删除名字中的数字和特殊字符"); 
   document.userfrm.fname.focus(); 
   document.userfrm.fname.select(); 
   return false 
  } 
 } 
} 
else{ 
 alert("请输入“名字”文本框"); 
 document.userfrm.fname.focus(); 
 return false 
} 
// Validate last name 
if(fname.length != 0){ 
 for(i=0;i<fname.length;i++){ 
 var ftext = fname.substring(i,i+1); 
  if(ftext < 9 || ftext > 0){ 
   alert("名字中包含数字 \n"+"请删除名字中的数字和特殊字符"); 
   document.userfrm.fname.focus(); 
   document.userfrm.fname.select(); 
   return false 
  } 
 } 
} 
else{ 
 alert("请输入“名字”文本框"); 
 document.userfrm.fname.focus(); 
 return false 
} 
// Validate last name 
if(lname.length != 0){ 
 for(j=0;j<lname.length;j++){ 
 var ltext = lname.substring(j,j+1); 
  if(ltext < 9 || ltext > 0){ 
   alert("姓氏中包含数字 \n"+"请删除姓氏中的数字和特殊字符"); 
   document.userfrm.lname.focus(); 
   document.userfrm.lname.select(); 
   return false 
  } 
 } 
} 
else{ 
 alert("“姓氏”文本框为空"); 
 document.userfrm.lname.focus(); 
 return false; 
 } 
return true; 
} 
// Login Name Validation 
function sNameCheck(){ 
var sname = document.userfrm.sname.value; 
var illegalChars = /\W/; 
 if(sname.length != 0){ 
  if(illegalChars.test(sname)){ 
  alert("登录名无效"); 
  document.userfrm.sname.select(); 
  return false; 
  } 
 } 
 else{ 
 alert("是否忘记输入登录名？"); 
 document.userfrm.sname.focus(); 
 return false 
 } 
 return true; 
} 
//Validate password 
function passCheck(){ 
var userpass = document.userfrm.pass.value; 
var ruserpass = document.userfrm.rpass.value; 
var illegalChars = /[\W_]/;// allow only charactors and numbers 
 // Check if Password field is blank. 
 if(userpass == "" || ruserpass == ""){ 
  alert("未输入密码 \n" + "请输入密码"); 
  document.userfrm.pass.focus(); 
 return false; 
 } 
 // Check if password length is less than 6 charactor. 
 if(userpass.length < 6){ 
  alert("密码必须多于或等于 6 个字符。\n"); 
  document.userfrm.pass.focus(); 
 return false; 
 } 
 //check if password contain illigal charactors. 
 else if(illegalChars.test(userpass)){ 
  alert("密码包含非法字符"); 
  document.userfrm.pass.select(); 
  return false; 
 } 
  
 else if(userpass != ruserpass){ 
  alert("密码不符"); 
  document.userfrm.rpass.select(); 
  return false; 
 } 
 return true; 
} 
 
// Email Validation 
function emailcheck(){ 
var usermail = document.userfrm.email.value; 
 
 if(usermail.length == "0"){ 
 alert("Email 文本框为空") 
 document.userfrm.email.focus(); 
 return false; 
 } 
 if( usermail.indexOf("@") < 0 || usermail.indexOf(".") < 0 || usermail.indexOf("@") > usermail.indexOf(".")){ 
  
  alert("Email 地址无效"); 
  return false; 
 } 
 return true; 
} 
 
function bdaycheck(){ 
var bmonth = document.userfrm.bmon.value; 
var bday = document.userfrm.bday.value; 
var byear = document.userfrm.byear.value; 
//alert(bmonth + "/" + bday + "/" + byear); 
 if(bmonth == "" || bday == "" || byear == "" || bday=="dd" || byear == "yyyy"){ 
  alert("请输入您的生日"); 
  document.userfrm.bmon.focus(); 
  return false; 
 } 
  
 for(i=0; i<bday.length; i++){ 
 var bnum = bday.substring(i,i+1) 
  if(!(bnum < 9 || bnum > 0)){ 
  alert("生日无效"); 
  document.userfrm.bday.focus(); 
  return false; 
  } 
 } 
 
 for(j=0; j<byear.length; j++){ 
 var bynum = byear.substring(j,j+1) 
  if(!(bynum < 9 || bynum > 0)){ 
  alert("生日无效"); 
  document.userfrm.byear.focus(); 
  return false; 
  } 
 } 
  //验证出生年月日是否在指定的范围内 
 if (byear<1900||byear>2120){ 
  alert("您输入的出生年份超出范围！\n请重新输入！"); 
  document.userfrm.byear.focus(); 
  return(false); 
   } 
  else 
   if(bmonth<0||bmonth>12){ 
    alert("您输入的月份超出范围！\n请重新输入！"); 
    document.userfrm.bmon.focus(); 
    return(false); 
   } 
   else 
    if(bday<0||bday>31){ 
     alert("您输入的日期超出范围!\n请重新输入！"); 
     return(false); 
    } 
    
   return true; 
} 
//check sex 
function genderCheck(){ 
var usergen = document.userfrm.gen.length; 
 for(i=0;i<usergen;i++){ 
  if(document.userfrm.gen[i].checked){ 
  return true; 
  } 
  if (i==usergen-1){ 
  alert("请选择性别"); 
  return false; 
  } 
 } 
 return true; 
} 
function agree( ) 
{ 
 if (document.userfrm.okradio[0].checked==false) 
 { 
  alert("您必须同意淘宝网的协议！才能加入会员"); 
  return false; 
 } 
 else 
  return true; 
} 
</SCRIPT> 
 
<TABLE width="950" border="0" align="center"> 
 <TR> 
 <TD height="75"><h4>注册步骤： 1.填写信息　>　 2.收电子邮件　>　3.注册成功 </h4></TD> 
 </TR> 
</TABLE> 
 
<TABLE width="950" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#99CCFF"> 
 <FORM name="userfrm" method="post" action="register_success.htm" onSubmit="return validateform( )"> 
 <TR class="register_table_line"> 
 <TD width="160" align="right" bgcolor="#E7FBFF">名字：</TD> 
 <TD width="507" align="left" bordercolor="#E7E3E7"><INPUT name="fname" type="text" class="register_textBroader" 
 
 id="fname" size="24"></TD> 
 </TR> 
 <TR class="register_table_line"> 
 <TD width="160" align="right" bgcolor="#E7FBFF">姓氏：</TD> 
 <TD align="left" bordercolor="#E7E3E7"><INPUT name="lname" type="text" class="register_textBroader" id="lname" 
 
size="24"></TD> 
 </TR> 
 <TR class="register_table_line"> 
 <TD width="160" align="right" bgcolor="#E7FBFF">登录名：</TD> 
 <TD align="left" bordercolor="#E7E3E7"> <INPUT name="sname" type="text" class="register_textBroader" id="sname" 
 
size="24"> 
（可包含 a-z、0-9 和下划线）</TD> 
 </TR> 
 <TR class="register_table_line"> 
 <TD width="160" align="right" bgcolor="#E7FBFF">密码：</TD> 
 <TD align="left" bordercolor="#E7E3E7"> <INPUT name="pass" type="password" class="register_textBroader" 
 
id="pass" size="26"> 
（至少包含 6 个字符） </TD> 
 </TR> 
 <TR class="register_table_line"> 
 <TD width="160" height="0" align="right" bgcolor="#E7FBFF">再次输入密码：</TD> 
 <TD height="0" align="left" bordercolor="#E7E3E7"><INPUT name="rpass" type="password" 
 
class="register_textBroader" id="rpass" size="26"></TD> 
 </TR> 
 <TR class="register_table_line"> 
 <TD width="160" height="0" align="right" bgcolor="#E7FBFF">电子邮箱：</TD> 
 <TD height="0" align="left" bordercolor="#E7E3E7"><INPUT name="email" type="text" class="register_textBroader" 
 
id="email" size="24">（必须包含 @ 字符）</TD> 
 </TR> 
 <TR class="register_table_line"> 
 <TD width="160" align="right" bgcolor="#E7FBFF">性别：</TD> 
 <TD align="left" bordercolor="#E7E3E7"> 
  <INPUT name="gen" type="radio" value="男" checked> 
   男  
  <INPUT name="gen" type="radio" value="女" class="input">  女 
 </TD> 
 </TR> 
 <TR class="register_table_line"> 
 <TD width="160" align="right" bgcolor="#E7FBFF">爱好：</TD> 
 <TD align="left" bordercolor="#E7E3E7"> 
  <LABEL> 
  <INPUT type="checkbox" name="checkbox" value="checkbox"> 
  </LABEL> 
   运动   
  <LABEL> 
  <INPUT type="checkbox" name="checkbox2" value="checkbox"> 
  </LABEL> 
  聊天   
  <LABEL> 
  <INPUT type="checkbox" name="checkbox22" value="checkbox"> 
  </LABEL> 
  玩游戏 
 </TD> 
 </TR> 
 <TR class="register_table_line"> 
 <TD width="160" align="right" bgcolor="#E7FBFF">出生日期：</TD> 
 <TD align="left" bordercolor="#E7E3E7"> 
  <INPUT name="byear" class="register_textBroader" id="byear" onFocus="this.value=''" value="yyyy" 
 
size=4 maxLength=4 > 年   
   <SELECT name="bmon" > 
   <OPTION value="" selected>[选择月份] 
    <OPTION value=0>一月 
    <OPTION value=1>二月 
    <OPTION value=2>三月 
    <OPTION value=3>四月 
    <OPTION value=4>五月 
    <OPTION value=5>六月 
    <OPTION value=6>七月 
    <OPTION value=7>八月 
    <OPTION value=8>九月 
    <OPTION value=9>十月 
    <OPTION value=10>十一月 
    <OPTION value=11>十二月 
   </SELECT> 月   
   <INPUT name="bday" class="register_textBroader" id="bday" onFocus="this.value=''" value="dd" 
 
size=2 maxLength=2 >日 
 </TD> 
 </TR> 
 <TR class="register_table_line"> 
 <TD width="160" height="35" align="right" bgcolor="#E7FBFF"> 
  <INPUT type="reset" name="Reset" value=" 重 填 "></TD> 
 <TD height="35" align="left" bordercolor="#E7E3E7"> 
  <INPUT type="submit" name="Button" value="同意以下服务条款，提交注册信息"> 
 </TD> 
 </TR> 
 <TR> 
 <TD colspan="2"><TABLE width="760" border="0"> 
  <TR> 
  <TD height="36"> 
   <H4>阅读淘宝网服务协议 </H4> 
  </TD> 
  </TR> 
  <TR> 
  <TD height="120"> 
   <TEXTAREA name="textarea" cols="80" rows="6"> 
欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao.com网站的各种工具和服务。 
本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。 
淘宝的权利和义务 
1.淘宝有义务在现有技术上维护整个网上交易平台的正常运行，并努力提升和改进技术，使用户网上交易活动的顺利。 
2.对用户在注册使用淘宝网上交易平台中所遇到的与交易或注册有关的问题及反映的情况，淘宝应及时作出回复。 
3.对于在淘宝网网上交易平台上的不当行为或其它任何淘宝认为应当终止服务的情况，淘宝有权随时作出删除相关信息、终止服务提 
 
供等处理，而无须征得用户的同意。 
4.因网上交易平台的特殊性，淘宝没有义务对所有用户的注册资料、所有的交易行为以及与交易有关的其他事项进行事先审查。  
   </TEXTAREA> 
  </TD> 
  </TR> 
 </TABLE></TD> 
 </TR> 
 </FORM> 
</TABLE> 
</div> 
</body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

最原始的jQuery注册验证方式

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
多浏览器支持的右下角浮动窗口
Apr 01 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
js正则表达式注册页面表单验证
Oct 11 #Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 #Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 #Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 #Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 #Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 #Javascript
js 判断附件后缀的简单实现方法
Oct 11 #Javascript
单管机(1) ICF-2010(1) 探测器(1) 电路(15) BOSE(2) 春雷3P7(1) 原理(1) 音箱(1) 收信机(3) 耳机(1)
You might like
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
[03:48]大碗DOTA
2019/07/25 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Python 代码调试技巧示例代码
2020/08/11 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
美国瑜伽品牌：Gaiam
2017/10/31 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
文案策划专业自荐信
2014/07/07 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
党员先进事迹材料
2014/12/19 职场文书
考试作弊检讨书怎么写？
2014/12/21 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang