最原始的jQuery注册验证方式_jquery

这里介绍的第一个是最原始的表单验证方式，即没有使用即时验证，需要点击提交按钮才进行验证，也没有使用正则表达式或者AJAX验证，也或者是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表单验证
jQuery注册验证
jquery注册表单验证、jquery注册验证实例、jquery注册验证、jquery ajax注册验证、jquery用户注册验证，以便于您获取更多的相关知识。

时间： 2024-09-23 04:15:22

最原始的jQuery注册验证方式_jquery的相关文章

CKEditor无法验证的解决方案（js验证+jQuery Validate验证）_jquery

最近项目的前端使用了jQuery,表单的前端验证用的是jQuery Validate,用起来很简单方便,一直都很满意的. 前段时间,根据需求为表单中的 textarea 类型的元素加上了html富文本编辑器,用的是CKEditor,功能强大,定制方便,也很满意. 不过用CKEditor增强过的 textarea 元素,这个字段要求是非空的,在jQuery Validate总是验证不通过,原因就是在 CKEditor 编辑器填写了内容之后,编辑器并不是立即把内容更新到原来的 textarea 元素

ASP.NET MVC的客户端验证：jQuery的验证

之前我们一直讨论的Model验证仅限于服务端验证,即在Web服务器根据相应的规则对请求数据实施验证.如果我们能够在客户端(浏览器)对用户输入的数据先进行验证,这样会减少针对服务器请求的频率,从而缓解Web服务器访问的压力.ASP.MVC 2.0及其之前的版本采用ASP.NET Ajax进行客户端验证,在ASP.NET MVC 3.0中,jQuery验证框架被引入是我们可以采用Unobtrusive JavaScript的方式进行客户端验证. 一.Unobtrusive JavaScript Un

jQuery Validation插件remote验证方式的Bug解决_jquery

不过奇怪的是,最近用下来感觉有些古怪,因为好像有些死板,已有功能的应变能力还不强,甚至还有个奇怪的Bug.任何项目有Bug其实也正常,但这个Bug其实是一个文档上已经记载了,却没有实现的功能,这就有些说不过去了.这个问题便出在remote验证方式上,还好修改起来非常容易,在此记录一下,也方便以后的参考. 在表单验证时,有时候会需要发一个AJAX请求去服务器上进行判断,例如在用户注册时检查用户名是否存在.jQuery Validation插件提供了一种remote方式来实现这一点.例如我可以这样验

jQuery Validate验证框架详解(推荐)_jquery

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 一.导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src=&qu

jQuery Validate验证框架经典大全_jquery

jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src

多种jQuery绑定事件的实现方式_jquery

最近发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行. 下面是一个click事件被重复绑定的示例: function reg_button_click(){ $("#button).click(function(){ alert("button click"); }); } $(document).ready(function(){ #重复注册3次 reg_button_click(); reg_button_click(); reg_but

Jquery Easyui验证组件ValidateBox使用详解（20）_jquery

本文实例为大家分享了Jquery Easyui验证组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <input id="email" class="easyui-validatebox" data-options="required:true,validType:'email'" /> JS调用加载 <input id="email" /> <script> $(func

Jquery注册事件实现方法_jquery

本文实例讲述了Jquery注册事件实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

jquery注册文本框获取焦点清空,失去焦点赋值的简单实例_jquery

在我们开发过程中特别是用户注册时会有一个效果,就是文本框获取焦点清空提示,如果用户没有输入信息失去焦点赋值上我们的提示语. <html> <head> <meta http-equiv="content-type"content="text/html; charset=UTF-8"/> <script src="http://127.0.0.1/jquery.js"></script>