jQuery做的验证

最新推荐文章于 2024-10-03 10:12:38 发布
最新推荐文章于 2024-10-03 10:12:38 发布
阅读量2.3k 收藏
点赞数
分类专栏： jquery 文章标签： jquery input class function button border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dandeline/article/details/5842456
版权


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<link href="css/common.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/clock.js"></script>
<script type="text/javascript" src="js/display.js"></script>
<script language="javascript">
//验证用户名
function checkAll()
{
 if(checkMZ()&&checkPhone()&&checkLove())
 {
  return true;
 }
 return false;
}
function checkUName()
{
   var UName=document.getElementById("uname");
   if(UName.value=="")
   {
       alert("用户名不能为空！");
  return false;
   }
   else
   {
      var zz=/^[a-zA-Z][a-zA-Z0-9_]{2,19}$/; 
   if(!zz.test(UName.value))
   {
    alert("您输入的用户名不符合规范！请重新输入");
  UName.focus();
  UName.select();
  return false;
   }
   }
   return true;
}

function checkSex()
{
   var sexs=document.getElementsByName("sex");
 var bsex=false;
 for(var i=0;i<sexs.length;i++)
 {
  if(sexs[i].checked)
  {
   bsex=true;
   break;
  }
 }
 if(!bsex)
 {
  alert("性别不能为空！");
  return false; 
 }
}
//控制民族div的显示与隐藏
function show()
{
   var divdisplay=document.getElementById("jg");
   divdisplay.style.display="";
 //设置div的左边距和上边距
 divdisplay.style.pixelTop=window.event.clientY;
 divdisplay.style.pixelLeft=window.event.clientX+50;
}
//为民族赋值
function setValue()
{
 var divValue=document.getElementsByName("jg1");
 var changess=false;
 var jgValue="";
  for(var i=0;i<divValue.length;i++)
  {
    if(divValue[i].checked)
    {
      changess=true;
   jgValue=divValue[i].value;
   break;
    }
  }
  if(!changess)
  {
    alert("请选择民族！");
    return false;
  }
  else
  {
   //将选择的民族赋给文本框
   document.getElementById("mz").value=jgValue;
  //确定输入以后就将层隐藏
   var divdisplay=document.getElementById("jg");
     divdisplay.style.display="none";
  }
 
}
//验证民族是否为空
function checkMZ()
{
    var MZ=document.getElementById("mz");
 if(MZ.value=="")
 {
    alert("民族不能为空！");
    return false;
 }
  return true;
}
function checkArea()
{
 var Area=document.getElementById("dlarea");
 if(Area.value=="请选择")
 {
  alert("请选择省份");
  return false;
 }
 return true;
}
//省级联会
function checkCity()
{
   var cityList=new Array();
    cityList['湖北省']=['武汉','荆州','襄樊','恩施'];
  cityList['湖南省']=['长沙','常德','张家界','华容'];
 
  var index=document.getElementById("dlarea").value;
  var newoptions;
  document.getElementById("dlcity").options.length=0;
 
 
  for(var i in cityList[index])
  {
    newoptions=new Option(cityList[index][i],cityList[index][i]);
   document.getElementById("dlcity").options.add(newoptions);
  }
}
//验证联系方式
function checkPhone()
{
   var Mobile=document.getElementById("mobile");
   var Telephone=document.getElementById("telephone");
   if(Mobile.value==""&&Telephone.value=="")
   {
     alert("请任选一种联系方式！");
  Mobile.focus();
  return false; 
   }
   else 
   {
     if(Mobile.value!="")
  {
   var zzMobile=/^1[358][0-9]{9}$/;
   if(!zzMobile.test(Mobile.value))
   {
    alert("手机格式不正确！");
    Mobile.focus();
    Mobile.select();
    return false;
   }
  }
  if(Telephone.value!="")
  {
    var zzTelephone=/^0[0-9]{2}[-]?[0-9]{8}|0[0-9]{3}[-]?[0-9]{7} $/;
    if(!zzTelephone.test(Telephone.value))
    {
      alert("固定电话格式不正确！");
    Telephone.focus();
    Telephone.select();
    return false;
    }
  }
   }
}
//爱好
function checkLove()
{
 var loves=document.getElementsByName("love");
 var blove=false;
 for(var i=0; i<loves.length;i++)
 {
   if(loves[i].checked)
  {
     blove=true;  
  }
 } 
 if(!blove)
 {
  alert("爱好不能为空！");
  return false; 
 }
}
function add()
{
 //方法1
 var Addtable=document.getElementById("px");
 with(Addtable.firstChild)appendChild(lastChild.cloneNode(true));
 //方法2
 /*var Addtable=document.getElementById("px");
 //给表格添加单元行
 var tr=Addtable.insertRow();
 //给单元行添加单元列
 var td=tr.insertCell();
 td.innerHTML="<input  type='file' class='input' size='20'/>&nbsp;<input class='input' οnclick='add()' type='button' value='增加'/><input class='input' type='button' value='删除' οnclick='deletetable(this)'/>";*/
}
function deletetable(pindex)
{
 var deltable=document.getElementById("px");
 if(deltable.length==1)
 {
  alert("至少有一个上传图片的");
  return;
 }
 //获取到当前对象的父节点的父节点的行索引
 var i=pindex.parentElement.parentElement.rowIndex;
 //通过行索引删除行
 deltable.deleteRow(i);
}
</script>
</head>
<body >
 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left" valign="top"><br />
      <div class="currentP">当前位置：用户信息登记 </div>
 <br />
 <table width="97%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="48%">
  <table width="100%" class="contentTitle">
          <tr>
            <td width="1%"><img src="images/bg_mcontentL.gif" /></td>
                <td width="95%"><h3>个人信息</h3></td>
                <td width="4%" align="right"><img src="images/bg_mcontentR.gif" /></td>
              </tr>
          </table>
            <table width="100%" class="contentModule">
              <tr>
                <td><div class="contentModuleB">
                    <table width="100%" border="0" cellspacing="1" cellpadding="0" class="DoubleColorTable">
                                             <tr>
                                               <td align="right">用户名：</td>
                                               <td align="left"><input id="uname" type="text" class="input" value="" size="32" />
                                                 &nbsp;<span style="color:red
        ">*</span>&nbsp;<span class="gray">由英文字母（不区分大小写）、数字或下划线组成的3到20位字符，并以英文字母开头，如：itour168</span></td>
                                             </tr>
                        <tr>
                          <td align="right" valign="top">性别：</td>
                          <td align="left"><input name="sex" type="radio" value="" />男&nbsp;<input name="sex" type="radio" value="" />女<span style="color:red
        ">*</span></td>
      </tr>
      <tr>
                          <td align="right" valign="top">生日：</td>
                          <td align="left"><input name="birthday" onKeyDown="return false" οnpaste="return false" type="text"  value="" size="15" class="input"/>
      <img src="images/calender.gif" alt="日期"  name="change3" width="25" height="21" align="absmiddle" id="change3" onClick="javascript:show_cele_date(change3,birthday);" />格式：yyyy-mm-dd</td>
      </tr>
      <tr>
                          <td align="right" valign="top">民族：</td>
                          <td align="left"><input id="mz" type="text" class="input"   size="9" onClick="show()" />&nbsp;<span style="color:red
        ">*</span>点击文本框进行选择</td>
      </tr>
      <tr>
                          <td align="right" valign="top">省份：</td>
                          <td align="left"><select id="dlarea" onChange="checkCity() "><option value="">请选择</option>
        <option value="湖北省">湖北省</option>
        <option value="湖南省">湖南省</option>
        </select> &nbsp;<span style="color:red ">*</span></td>
      </tr>
      <tr>
                          <td align="right" valign="top">城市：</td>
                          <td align="left"><select id="dlcity"><option value="">请选择</option>
      
        </select>&nbsp;<span style="color:red
        ">*</span></td>
      </tr>
      <tr>
                          <td align="right" valign="top">手机：</td>
                          <td align="left"><input id="mobile" type="text" class="input" value="" size="32" />
                            格式：13488888888</td>
      </tr>
      <tr>
                          <td align="right" valign="top">固定电话：</td>
                          <td align="left"><input id="telephone" type="text" class="input" value="" size="32" />
                            格式：027-88888888或0716-8888888&nbsp;手机和固定电话请至少填写一项</td>
      </tr>
      <tr>
                          <td align="right" valign="top">爱好：</td>
                          <td align="left"><input type="checkbox" name="love" />
        篮球<input type="checkbox" value="音乐" name="love"/>音乐
        <input type="checkbox"  value="旅游" name="love"/>旅游
        <input type="checkbox"  value="看书" name="love"/>看书  
         <span style="color:red ">*</span>请最少选择一项</td> 
      </tr>
      <tr>
                          <td align="right" valign="top">学历：</td>
                          <td align="left"><select id="dlxl"><option value="">请选择</option><option value="硕士">硕士</option><option value="本科">本科</option>
        <option value="大专">大专</option><option value="其他">其他</option></select></td>
      </tr>
                                             <tr>
                          <td width="20%" align="right">上传图片：</td>
                          <td width="80%" align="left"><table id="px"><tr><td><input  type="file" class="input" size="20"/>&nbsp;<input class="input"  type="button" value="增加" onClick="add()"/><input class="input" type="button" value="删除" onClick="deletetable(this)" /></td></tr></table></td>
         </tr>
      <tr>
                          <td align="right" valign="top">个人介绍：</td>
                          <td align="left"><textarea name="personalIntroduction" rows="2" cols="20"></textarea> </td>
      </tr>
        </table>
                </div></td>
              </tr>
          </table></td>
        </tr>
    </table>
 <br />
  <div align="center">
       <input type="button" class="button2" value="保存" onClick="return checkAll();" />
  </div>
   </td>
  </tr>
</table>
<div id="jg" style="position:absolute; width:250px; height:120px; z-index:1;border: solid 1px #B1DE27; background-color:#FFFFFF; display:none; top:320px; left:450px">
 <div style="width: 250px; height: 22px; background-color:#CCCCCC">
<a onClick="document.getElementById('jg').style.display='none'" title="关闭" style="cursor: pointer;float:right;margin-top:3px;display:inline;">×</a>
    </div>
 <div style="padding: 4px; border-top: 0px; padding-bottom: 8px; display: block; padding-top: 0px; padding-left: 5px;">
<input type="radio" value="汉族" name="jg1"/>汉族<input type="radio" name="jg1" value="维吾尔族"/>维吾尔族<input type="radio" name="jg1" value="朝鲜族"/>朝鲜族<input type="radio" name="jg1" value="白族"/>白族<br/><input name="jg1" type="radio" value="满族"/>满族<input name="jg1" type="radio" value="苗族"/>苗族<input name="jg1" type="radio" value="回族"/>回族<input type="radio" name="jg1" value="白族"/>白族<br/>
<input type="radio" name="jg1" value="藏族"/>藏族<input type="radio" name="jg1" value="羌族"/>羌族<input name="jg1" type="radio" value="壮族"/>壮族<input type="radio" value="傣族" name="jg1"/>傣族<br/>
</div>
<div align="center"><input type="button" value="确定"  onClick="setValue()"/>&nbsp;<input type="button" value="关闭" onClick="document.getElementById('jg').style.display='none'" /></div>
</div>
<br />
</body>
</html>

parverxiao
关注
专栏目录
jQuery--验证用户登录
罗俊
07-20 7617
前言 内容 HTML代码： CSS代码： JavaScript代码： 总结 HTML知识点: CSS知识点: JavaScript知识点: end 前言 前面的博客对jQuery有所介绍，所以接下来的这几篇博客是对jQuery的介绍，具体介绍方式是用例子呈现给大家。 内容 废话少说，先上代码： HTML代码： &amp;lt;!DOCTYPE html&amp;gt...
jquery注册用户验证
10-17
在cnblogs上下载的，看着还不错,引用地址http://www.cnblogs.com/wzh2010/archive/2010/10/17/1853345.html
jQuery验证
zhejingyuan的专栏
10-12 2304
jQuery验证
掌握jQuery Validate插件：表单验证技术详解
最新发布
weixin_42393362的博客
10-03 1181
本文还有配套的精品资源，点击获取 简介：本文全面介绍了jQuery Validate插件的使用方法和在实际项目中的应用。首先介绍了该插件的功能和优势，然后详细讲解了如何引入和初始化验证，如何自定义验证规则以及使用验证组和事件处理。本文还提供了示例应用和总结，帮助读者深入理解并有效运用jQuery Validate插件进行前端验证。 1. jQuery Valida...
Jquery表单验证
04-27 456
jQuery formValidator表单验证插件 -- by:猫冬，email:wzmaodong@126.com$(document).ready(function(){ //$.formValidator.initConfig({onerror:function(){alert("校验没有通过，具体错误请看错误提示")}});
jquery验证大全
weixin_34197488的博客
03-10 130
jQuery验证及限制 绑定键盘监听事件 $(document).on("keypress", ".txt-valid-len", function (e) { return (this.value.length < $(this).attr("maxlength")); }); 输入框设置 然后我们只需要...
jquery验证
shangyunxia_syx的博客
10-23 291
function isPhone(field, rules, i, options){     var phone = /^((1\d{10})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)$/
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jQuery密码验证规则
06-01
实现jQuery验证逻辑** 在`pwd.js`文件中，我们编写jQuery代码来处理用户输入并验证密码： ```javascript $(document).ready(function() { var pwdRules = { length: 8, complexity: /(?=.*\d)(?=.*[a-z])(?=.*...
jQuery正则验证注册页面经典实例
10-19
jQuery正则验证是一种通过正则表达式来检查用户输入内容的合法性，并对不符合规则的数据进行提示的方法。 在本文中，我们将详细介绍如何使用jQuery和正则表达式来验证注册页面的几个关键字段，包括用户名、密码、...
jQuery表单验证
10-29
四、jQuery验证插件 虽然jQuery本身提供了基础的事件处理和DOM操作，但为了实现复杂的验证规则，我们通常会使用第三方验证插件，如`jQuery Validation Plugin`。这个插件提供了丰富的验证规则和自定义消息功能，极...
JQuery validate插件验证用户注册信息
01-19
使用JQuery的validate插件做客户端验证非常方便，下面做一个使用validate插件验证用户注册信息的例子。 本实例使用的是1.5版本。 示例是在SSH下做的，代码如下： registe.jsp <%@ page language=java ...
jQuery验证框架
zgmzyr的专栏
04-18 5447
转载于：http://koalaxyq.iteye.com/blog/559202Html代码  <script type="text/javascript" src=js/jquery-1.3.2.min.js></script>  <script type="text/javascript" src=js/jquery.validate.pack.js></script>  <script type="text/javascript">      $(document).ready(function()
Jquery验证效验
Glory
03-20 237
校验数字的表达式 •数字：^[0-9]*$ •n位的数字：^\d{n}$ •至少n位的数字：^\d{n,}$ •m-n位的数字：^\d{m,n}$ •零和非零开头的数字：^(0|[1-9][0-9]*)$ •非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$ •带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$ •正数、负数、和小数...
JQuery实现用户验证
冯浩月
03-06 5184
前言    Dreamweaver是一款非常实用，编辑HTML、CSS文件的工具，自己使用这款工具完成了jQuery知识的学习，下面小编来分享一下其中的一个实例，用户验证的一个例子，重点是CSS样式与HTML结合和jQuery方法的使用，Tomcat服务器的部分会在之后的AJAX的学习中安装使用。 认识Dreamweaver 一、背景     小编知道有这么一款工具是在学习AS
jquery validate (jquery 验证的三种方式)
热门推荐
安德里亚的成长
01-31 4万+
jquery  验证非常简单，下面总结常用的三种方式： 第一种方式：也是比较标准的方式：  首先引入jquery  插件和 jquery 验证插件： 第一步：引入插件 第二步： 定义表单的错误输出：   #frm label.error { color: Red; } 第三步：添加错误处理方法； jquery验证，需要有  1：定义验证方法，  2：添
jquery验证,远程验证,自定义验证
踏雪听雨
05-11 1492
         $(document).ready(function() {            jQuery.validator.addMethod(                "DepartmentCheck",                function(value, element) {                    return this.optional(eleme
jquery中常用验证总结（超全）
莫不静好
05-17 2862
jquery中常用验证总结 内容包含： 汉字的合法性、手机号码的合法性、电话号码的合法性、座机号码的合法性、身份证的合法性、根据身份证获取出生日期、正整数的合法性、验证数字的合法性 、验证浮点数的合法性、验证字母的合法性、验证有效数字、包括整数和浮点类型、验证邮箱格式的合法性、根据身份证获取年龄、判断平年还是闰年 、严格验证身份证号码、身份证号码 15位转18位中,计算校验位即最后一位、...
使用jquery实现图形点击文字按顺序验证码案例及代码完整版
小徐的博客
02-13 3515
首先进入这个网站:https://www.51qianduan.com 搜索验证码 网站为https://www.51qianduan.com/article/10774.html 如图 点击下载解压后如图: 在项目中导入css文件js文件image文件 图片可以自己选择没有要求注意图片格式要一直 创建jsp文件代码为: <%-- Created by IntelliJ IDEA. ...
jQuery表单验证实战教程
"jQuery表单验证实例教程" 在网页开发中，表单验证是一个至关重要的环节，它确保用户输入的数据符合预期格式，从而避免无效数据的提交和服务器端的额外处理。jQuery是一个轻量级、功能强大的JavaScript库，极大地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值