jquery表单验证

浅浅的花香味﹌ 2022-08-11 07:30 138阅读 0赞

**HTML表单：**

<form name="pad\_form" id="pad\_form" action="http://www.tpyx.cn/Accountspromotion/adv\_do\_register" method="post"  >  
   
   <table style="text-align:left; width:500px">  
   <tr>     
   <td width="100"><label>用户名：</td>     
   <td width="150"></label><input type="text" id="code"  name="username" size="20" /></td>  
   <td><span id="code\_notice" style="color:red; font-size:12px;"></span></td>  
   </tr>  
     
   <tr>  
   <td><label>登录密码：</label></td>  
   <td width="150"><input type="password" id="password" name="password" size="20"  /></td>  
   <td><span id="password\_notice"></span></td>  
   </tr>  
     
   <tr>  
   <td><label>重复密码：</label></td>  
   <td width="150"><input type="password" id="password2" name="password2" size="20" /></td>  
   <td><span id="password2\_notice"></span></td>  
   </tr>  
     
   <tr>  
   <td><label>服务器：</label></td>  
   <td width="150"><select id="re\_server\_id" name="sid"></select></td>  
   <td><span id="re\_server\_id\_notice"></span></td>  
   </tr>  
     
   <tr>  
   <td colspan="3" style=" padding-left:50px; padding-top:20px;"><input type="submit" id="submit" value=" " class="formsubmit" /></td>  
   </tr>  
   </table>

**Jquery验证：**

**第一种验证：**

<script type="text/javascript">  
$(document).ready(function() \{  
  
//用户名验证  
   $("\#code").focus(function()\{  
   $("\#code\_notice").html("<font style='color:white;'>请输入5-21个字符</font>");  
   \}  
   )     
   $("\#code").blur(function()\{  
     if($("\#code").val()==""||$("\#code").val()==null)\{  
  $("\#code\_notice").html("<font style='color:red;'>\*大侠，请留下您的尊姓大名。</font>");  
  $("\#submit").attr("disabled","false");  
  \}  
else if($("\#code").val().length>21||$("\#code").val().length<5)\{  
  $("\#code\_notice").html("<font style='color:red;'>  \* 注意是5-21个字符</font>");  
  $("\#submit").attr("disabled","false");  
 \}  
else\{  
$("\#code\_notice").html("")  
  //$("\#code\_notice").html("<font style='color:green;'>恭喜你，战神录上有名！</font>")  
  \}  
\})  
     
   //登录密码验证  
   $("\#password").blur(function()\{  
  if($("\#password").val()==""||$("\#password").val()==null)\{  
  $("\#password\_notice").html("<font style='color:red; font-size:12px;'>    \* 你还没有留下密码</font>");  
 // $("\#password").focus();  
$("\#submit").attr("disabled","false");  
  \}else\{  
   $("\#password\_notice").html("");\}     
  \})  
    
   //重复密码验证  
   $("\#password2").blur(function()\{  
     if($("\#password2").val()!=$("\#password").val())\{  
        $("\#password2\_notice").html("<font style='color:red; font-size:12px;'>    \* 两次密码不一致</font>");  
        //$("\#password2").focus();    
$("\#submit").attr("disabled","false");  
   \}else\{  
  $("\#password2\_notice").html("");\}  
     
\})  
  
  
  
  
//服务器验证  
  
  
$("\#submit").mousedown(function()\{  
sid=$("\#re\_server\_id").get(0).selectedIndex;  
if(sid=="-1")\{  
$("\#re\_server\_id\_notice").html("<font style='color:red; font-size:12px;'>    \* 请你选择服务器</font>");  
//$("\#submit").bind("click",function()\{this.disable=true;\});  
$("\#submit").attr("disabled","false");  
\}  
\})  
  
  
\})  
</script>

**第二中验证方法：**

pad\_form.submit(function()\{  
        var username=$('\#code'),  
        sid=$('\#re\_server\_id').get(0).selectedIndex,  
            pwd=$('\#password'),  
            password2=$('\#password2');  
        if(username.val()==""||username.val()==null)\{  
            alert('请填写用户名');  
            return false;  
        \}  
        if(pwd.val()==""||pwd.val()==null)\{  
            alert('请填写密码');  
            password.focus();  
            return false;  
        \}  
        if(password2.val()==""||password2.val()==null)\{  
            alert('请填写重复密码');  
password2.focus();  
            return false;  
        \}  
        if(password2.val()!=pwd.val())\{  
        alert('两次密码不一致');  
        password.focus();  
            return false;  
        \}  
if(sid=="-1")\{  
         alert('请选择服务器');  
         return false;  
         \}  
    \})

发表评论取消回复

表情：

评论列表（有 0 条评论，138人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery表单验证

<mce:script type="text/javascript"><!-- $(document).ready( function() \{ $(":radio").cli

野性酷女/ 2022年09月28日 15:20/ 0 赞/ 105 阅读

相关 jquery表单验证

HTML表单： <form name="pad\_form" id="pad\_form" action="http://www.tpyx.cn/Accountspromot

浅浅的花香味﹌/ 2022年08月11日 07:30/ 0 赞/ 139 阅读

相关 jQuery-表单验证

jQuery-表单验证感谢云之梦 ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1] ![这里写图片描述][South

秒速五厘米/ 2022年06月11日 01:48/ 0 赞/ 126 阅读

相关 jQuery之表单验证

1、HTML布局 ![70][] ![70 1][] 2、页面美化 ![70 2][] 3、JavaScript ![70 3][] ![

待我称王封你为后i/ 2022年05月21日 10:22/ 0 赞/ 145 阅读

相关 jQuery验证表单

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="U

今天药忘吃喽~/ 2022年05月10日 14:58/ 0 赞/ 167 阅读

相关用jQuery实现表单验证

转载自：[https://www.cnblogs.com/hellowzl/p/5612122.html][https_www.cnblogs.com_hellowzl_p_5

以你之姓@/ 2022年03月21日 14:37/ 0 赞/ 620 阅读

相关 JQuery制作网页——表单验证

1、表单验证：减轻服务器的压力、保证输入的数据符合要求； 2、常用的表单验证：日期格式、表单元素是否为空、用户名和密码、E-mail地址、身份证号码等；

向右看齐/ 2022年01月07日 04:39/ 0 赞/ 214 阅读

相关 jQuery表单验证

[jQuery中的表单验证][jQuery] html代码 ![复制代码][copycode.gif] <section id="register">

今天药忘吃喽~/ 2021年11月17日 16:58/ 0 赞/ 314 阅读

相关 jQuery Validate 表单验证

<!DOCTYPE html> <html lang="zh-CN"> <meta name="viewport" content="width=dev

逃离我推掉我的手/ 2021年10月01日 11:16/ 0 赞/ 365 阅读

相关 validate+jquery+ajax表单验证

1.案例 1.1 Html form表单内容 ![复制代码][copycode.gif] <form class="cForm" id="cForm" me

╰+哭是因爲堅強的太久メ/ 2021年09月14日 04:32/ 0 赞/ 378 阅读