首页
所有分类
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 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
javascript操作cookie_获取与修改代码
May 21 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
JS触摸与手势事件详解
May 09 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
vue如何进行动画的封装
Sep 26 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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
Xception(1) PostMapping(1) 微信(2) Lifecycle(1) Seaborn(1) tensorflow(2) ResNet50(1) Spring(9) 温控(1) 内存泄露(1)
You might like
php计算两个日期相差天数的方法
2015/03/14 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
php生成HTML文件的类方法
2019/10/11 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
Vue.js仿Metronic高级表格（一）静态设计
2017/04/17 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
python里 super类的工作原理详解
2019/06/19 Python
python opencv实现证件照换底功能
2019/08/19 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python实现简单俄罗斯方块
2020/03/13 Python
python Matplotlib模块的使用
2020/09/16 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
NUK奶瓶美国官网：NUK美国
2016/09/26 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
语文教学随笔感言
2014/02/18 职场文书
英文自荐信常用句子
2014/03/26 职场文书
工会换届选举方案
2014/05/21 职场文书
个人收入证明范本
2015/06/12 职场文书