简单的表单验证

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <link rel="stylesheet" href="style.css">
 6 <script type="text/javascript" src="js.js"></script>
 7 </head>
 8
 9 <body>
10 <form>
11     <!--会员名-->
12     <div>
13         <label>
14             <span>会员名:</span>
15             <input type="text" class="text" />
16         </label>
17         <p class="msg">
18             <i></i>
19             5-25个字符,一个汉字为两个字符,推荐使用中文会员名
20         </p>
21     </div>
22     <div>
23         <label>
24             <span></span>
25             <b id="count">0个字符</b>
26         </label>
27     </div>
28
29     <!--密码-->
30     <div>
31         <label>
32             <span>登陆密码:</span>
33             <input type="password" class="text" />
34         </label>
35         <p class="msg">
36             <i></i>
37             5-25个字符,一个汉字为两个字符,推荐使用中文会员名
38         </p>
39     </div>
40
41     <div style="margin:3px 0 10px 0">
42         <label>
43             <span></span>
44             <em class="active">弱</em>
45             <em>中</em>
46             <em>强</em>
47         </label>
48     </div>
49
50     <!--确认密码-->
51     <div style="padding-bottom:20px">
52         <label>
53             <span>确认密码:</span>
54             <input type="password" class="text disabled=" />
55         </label>
56         <p class="msg">
57             <i></i>
58             请再输一次
59         </p>
60     </div>
61
62     <!--验证码-->
63     <div>
64         <label>
65             <span>验证码:</span>
66             <input type="text" class="text" style="width:50px" />
67             <img class="ver_img" src="#">
68             <a class="changeimg" href="#" title="重新获取验证码"></a>
69         </label>
70     </div>
71
72     <!--提交按钮-->
73     <div>
74         <input class="submitBtn btn" type="submit" value="同意协议并注册">
75     </div>
76
77 </form>
78 </body>
79 </html>

js代码:

  1 function getLength(str){
  2
  3     return str.replace(/[^\x00-xff]/g,"xx").length; //双字节字符,获取汉字长度
  4 }
  5
  6 //判断是否全都使用相同字符
  7 function findStr(str,n){
  8     var tmp = 0;
  9     for(var i=0;i<str.length;i++){
 10         if(str.charAt(i)==n){
 11             tmp++;
 12         }
 13     }
 14     return tmp;
 15 }
 16
 17 window.onload = function(){
 18     var aInput = document.getElementsByTagName(‘input‘);
 19     var oName = aInput[0];
 20     var pwd = aInput[1];
 21     var pwd2 = aInput[2];
 22     var aP = document.getElementsByTagName(‘p‘);
 23     var name_msg = aP[0];
 24     var pwd_msg = aP[1];
 25     var pwd2_msg = aP[2];
 26     var count = document.getElementById(‘count‘);
 27     var aEm = document.getElementsByTagName(‘em‘);
 28
 29     var name_length = 0;
 30
 31 //用户名匹配
 32 //1.数字、字母(不区分大小写)、汉字,下划线
 33 //2.5-25个字符,推荐使用中文名
 34 //3.\u4e00-\u9fa5
 35 var re = /[^\w\u4e00-\u9fa5]/g;
 36
 37 //*********************用户名*************************
 38 oName.onfocus = function(){
 39     name_msg.style.display = "block";
 40     name_msg.innerHTML = ‘<i class="ati"></i>5-25个字符,一个汉字为两个字符,推荐使用中文会员名‘;
 41 }
 42
 43 oName.onkeyup = function(){
 44     count.style.visibility = "visible";
 45     name_length = getLength(this.value);
 46     count.innerHTML = name_length+"个字符";
 47     if(name_length==0){
 48         count.style.visibility = "hidden";
 49     }
 50
 51 }
 52
 53 //鼠标离开输入框时判断
 54 oName.onblur = function(){
 55 //含有非法字符
 56     var re =  /[^\x00-xff]/g;
 57     if(re.test(this.value)){
 58         name_msg.innerHTML = ‘<i class="err"></i>含有非法字符‘;
 59     }
 60 //不能为空
 61     else if(name_length==0){
 62         name_msg.innerHTML = ‘<i class="err"></i>不能为空‘;
 63     }
 64 //长度超过25个字符
 65     else if(name_length>25){
 66         name_msg.innerHTML = ‘<i class="err"></i>长度超过25个字符‘;
 67     }
 68 //长度少于6个字符
 69     else if(name_length<6){
 70         name_msg.innerHTML = ‘<i class="err"></i>长度少于6个字符‘;
 71     }
 72 //OK
 73     else{
 74         name_msg.innerHTML = ‘<i class="OK"></i>OK‘;
 75     }
 76 }
 77
 78  //*********************密码*************************
 79     pwd.onfocus = function (){
 80         pwd_msg.style.display = "block";
 81         pwd_msg.innerHTML = ‘<i class="ati></i>6~16个字符,请使用字母加数字或符号的组合密码,不能单独使用字母、数字或符号‘;
 82     }
 83     pwd.onkeyup = function (){
 84         //密码长度大于5强度为中
 85         if(this.value.length>5){
 86             aEm[1].className = "active";
 87             pwd2.removeAttribute("disabled");
 88             pwd2_msg.style.display = "block";
 89         }else{
 90             aEm[1].className = "";
 91             pwd2.setAttribute("disabled");
 92             pwd2_msg.style.display = "none";
 93         }
 94         //密码长度大于10强度为强
 95         if(this.value.length>10){
 96             aEm[2].className = "active";
 97             pwd2.removeAttribute("disabled");
 98             pwd2_msg.style.display = "block";
 99         }
100     }
101
102     pwd.onblur = function (){
103
104         var m = findStr(pwd.value,pwd.value[0]);
105         var re_n = /[^\d]/g;
106         var re_t = /[^a-zA-Z]/g;
107         //不能为空
108         if(this.value==""){
109             pwd_msg.innerHTML = ‘<i class="err"></i>长度不能不空‘;
110         }
111         //不能使用相同字符
112         else if(m==this.value.length){
113             pwd_msg.innerHTML = ‘<i class="err"></i>不能使用相同字符‘;
114         }
115         //长度应为6-16个字符
116         else if(this.value.length<6||this.value.length>16){
117             pwd_msg.innerHTML = ‘<i class="err"></i>长度应为6到16个字符‘;
118         }
119         //不能全为数字
120         else if(!re_n.test(this.value)){
121             pwd_msg.innerHTML = ‘<i class="err"></i>不能全为数字‘;
122
123         }
124         //不能全为字母
125         else if(!re_t.test(this.value)){
126             pwd_msg.innerHTML = ‘<i class="err"></i>不能全为字母‘;
127         }else{
128             pwd_msg.innerHTML = ‘<i class="ok"></i>OK‘;
129         }
130         //OK
131 }
132
133  //*********************确认密码**********************
134
135     pwd2.onblur = function(){
136         if(this.value!=pwd.value){
137             pwd2_msg.innerHTML = ‘<i class="err"></i>两次输入的密码不一致‘;
138         }else {
139             pwd2_msg.innerHTML = ‘<i class="ok"></i>OK‘;
140         }
141     }
142 }
时间: 2024-10-15 16:57:46

简单的表单验证的相关文章

JQuery中一个简单的表单验证的实例

html代码如下: <!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> <meta http-equiv=&quo

简单的表单验证(js、jquery)

//javascript代码 function valForm(){ var username=document.getElementById("username"); var pwd=document.getElementById("pwd"); var repwd=document.getElementById("repwd"); var email=document.getElementById("email"); va

python+django实现的简单的表单验证源码

下面的内容段是关于python+django实现的简单的表单验证的内容,应该能对大伙也有用途. <html> <head> <title>Form validation example</title> <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/bootstrap.css"> </head>

AngularJs的一个简单的表单验证

最近学习了AngularJs框架,觉得确实特别有用.之前学习了一点点的ASP.NET,它的控件也是挺好的,不过还是没有AngularJs轻巧. 定义一个应用程序myApp,一个控制器.接着是表单的验证. AngularJs中,表单控件的HTML元素有:input select button textarea元素 其实还算是很简单的例子. 不过我觉得对比起ASP那种庞大的控件来说,它确实很轻巧. AngularJS 输入验证$dirty 表单有填写记录$valid 字段内容合法的$invalid

最简单的表单验证

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>最简单表单验证</title> 6 <style> 7 form { margin: 20px auto; width: 500px; padding: 20px; border: 1px solid #ccc; box-sh

jquery 一个简单的表单验证实例

表单验证在网站开发过程中经常遇到,我们可以使用服务器端语言验证,也可以使用客户端语言来验证.本文章向大家介绍jquery客户端验证表单的一个简单实例.实例仅作参考. <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个

jQuery简单前端表单验证

<!DOCTYPE html> <html> <head> <title>表单验证</title> <script src="../scripts/jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("

jquery简单的表单验证密码

<tbody> <tr> <td style="width:25%">修改密码:</td> <td><input type="password" class="input" name="password" value="" id="password"></td> </tr> <tr>

如何利用jQuery进行简单表单验证

如何利用jQuery进行简单表单验证:利用jQuery可以进行表单验证,当然有比较复杂的表单验证,这里就不介绍了,下面就简单介绍一下如何使用jQuery进行简单的表单验证,然后大家可以通过改造进行基本的表达验证了.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http