表单添加JS验证

重点：

  一：表单的设计重在用户体验，界面应简单明了，不能太花哨。表单的内容也不应涉及过多关于用户的信息特别是隐私问题。

  二：具体的表单内容是Login，Password，Confirmpassword, Gender, Email。一般这几项就足以满足网站对用户信息的要求。

  三：JS的验证内容：

       1，用户在输入用户名，密码和电子邮件时，自动显示已按键的个数（也就是一个Counter），主要有onKeyUp函数实现，用户按键松开就作为一个计数。

       2，在用户填完所有的内容，并点击Register后，表单调用总的验证函数validateAll(),并显示用户信息输入的正确与否。

       3，validateAll()是总的验证函数，其中包括对输入信息长度的验证函数validateLength(),这个函数的作用是验证用户输入的信息是太短还是过长；密码比较函数comparePass(),这个函数比较好理解；密码强度验证函数passLevel(),根据输入字符中是否包含大小写，数字以及整个的长度来确定密码的强度，并最后显示以提醒用户；邮件验证函数chechEmail(),邮件的验证内容一般是一个邮件必须有一个"@"符，且不能为第一个字符，"@"符之后必须有一个"."符，且"."符与"@"之间要有字符，'.'符之后也要有字符。对邮件的验证内容，我在一篇英文博客上看的感觉总结的很好，摘录如下：

       Every email address must fulfill following criteria:

       ①. Must have some characters at the beginning (letters or numbers (and some less important))
       ②. Must have @ (at) character
       ③. Must have domain name
         a) Must have first word
         b) Must have . (dot) character
         c) Must have second word
       ④. And in the event that somebody believe his email address contains big letters it must convert characters to small ones

http://www.script-tutorials.com/form-validation-with-javascript-and-php/

       4，onsubmit必须用return function（）返回，这个还不理解原因，但是实践的结果的必须有return，否则就得不到想要的结果。

 

效果图：

JS代码：

 

  1 function updatelength(field, output) {
  2     curr_length = document.getElementById(field).value.length;
  3     field_mlen = document.getElementById(field).maxLength;
  4     document.getElementById(output).innerHTML = curr_length+'/'+field_mlen;
  5     return 1;
  6 }
  7 
  8 function check_v_pass(field, output) {
  9     pass_buf_value = document.getElementById(field).value;
 10     pass_level = 0;
 11     if (pass_buf_value.match(/[a-z]/g)) {
 12         pass_level++;
 13     }
 14     if (pass_buf_value.match(/[A-Z]/g)) {
 15         pass_level++;
 16     }
 17     if (pass_buf_value.match(/[0-9]/g)) {
 18         pass_level++;
 19     }
 20     if (pass_buf_value.length < 5) {
 21         if(pass_level >= 1) pass_level--;
 22     } else if (pass_buf_value.length >= 20) {
 23         pass_level++;
 24     }
 25     output_val = '';
 26     switch (pass_level) {
 27         case 1: output_val='Weak'; break;
 28         case 2: output_val='Normal'; break;
 29         case 3: output_val='Strong'; break;
 30         case 4: output_val='Very strong'; break;
 31         default: output_val='Very weak'; break;
 32     }
 33     if (document.getElementById(output).value != pass_level) {
 34         document.getElementById(output).value = pass_level;
 35         document.getElementById(output).innerHTML = output_val;
 36     }
 37     return 1;
 38 }
 39 
 40 function compare_valid(field, field2) {
 41     fld_val = document.getElementById(field).value;
 42     fld2_val = document.getElementById(field2).value;
 43     if (fld_val == fld2_val) {
 44         update_css_class(field2, 2);
 45         p_valid_r = 1;
 46     } else {
 47         update_css_class(field2, 1);
 48         p_valid_r = 0;
 49     }
 50     return p_valid_r;
 51 }
 52 
 53 function check_v_mail(field) {
 54     fld_value = document.getElementById(field).value;
 55     is_m_valid = 0;
 56     if (fld_value.indexOf('@') >= 1) {
 57         m_valid_dom = fld_value.substr(fld_value.indexOf('@')+1);
 58         if (m_valid_dom.indexOf('@') == -1) {
 59             if (m_valid_dom.indexOf('.') >= 1) {
 60                 m_valid_dom_e = m_valid_dom.substr(m_valid_dom.indexOf('.')+1);
 61                 if (m_valid_dom_e.length >= 1) {
 62                     is_m_valid = 1;
 63                 }
 64             }
 65         }
 66     }
 67     if (is_m_valid) {
 68         update_css_class(field, 2);
 69         m_valid_r = 1;
 70     } else {
 71         update_css_class(field, 1);
 72         m_valid_r = 0;
 73     }
 74     return m_valid_r;
 75 }
 76 
 77 function valid_length(field) {
 78     length_df = document.getElementById(field).value.length;
 79     if (length_df >= 1 && length_df <= document.getElementById(field).maxLength) {
 80         update_css_class(field, 2);
 81         ret_len = 1;
 82     } else {
 83         update_css_class(field, 1);
 84         ret_len = 0;
 85     }
 86     return ret_len;
 87 }
 88 
 89 function update_css_class(field, class_index) {
 90     if (class_index == 1) {
 91         class_s = 'wrong';
 92     } else if (class_index == 2) {
 93         class_s = 'correct';
 94     }
 95     document.getElementById(field).className = class_s;
 96     return 1;
 97 }
 98 
 99 function validate_all(output) {
100     t1 = valid_length('login');
101     t2 = valid_length('password');
102     t3 = compare_valid('password', 'c_password');
103     t4 = check_v_mail('email');
104     t5 = check_v_pass('password', 'pass_result');
105 
106     errorlist = '';
107     if (! t1) {
108         errorlist += 'Login is too short/long<br />';
109     }
110     if (! t2) {
111         errorlist += 'Password is too short/long<br />';
112     }
113     if (! t3) {
114         errorlist += 'Passwords are not the same<br />';
115     }
116     if (! t4) {
117         errorlist += 'Mail is wrong<br />';
118     }
119     if (errorlist) {
120         document.getElementById(output).innerHTML = errorlist;
121         return false;
122     }
123     return true;
124 }

 

转载于:https://www.cnblogs.com/Adeline-p2y/archive/2012/10/24/2736787.html