首页
所有分类
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 相关文章推荐
jQuery结合Json提交数据到Webservice，并接收从Webservice返回的Json数据
Feb 18 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
DOM事件探秘篇
Feb 15 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
JavaScript 巧学巧用
May 23 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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
接收函(23) 制度(225) 事迹材料(636) 证明书(326) 广播稿(323) 计划书(118) 方案(1080) 答谢词(97) 感言(394) 教学反思(909)
You might like
PHP实现分页的一个示例
2006/10/09 PHP
PHP生成压缩文件实例
2015/02/07 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
js常用代码段整理
2011/11/30 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
onkeyup，onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
vue单页面打包文件大？首次加载慢？nginx带你飞，从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
全球最大的在线橄榄球商店：Lovell Rugby
2018/05/20 全球购物
Linux文件系统类型
2012/09/16 面试题
司机职责范本
2014/03/08 职场文书
司机工作自我鉴定
2014/09/19 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript
详解TypeScript的基础类型
2022/02/18 Javascript