(javascript)Validation有谁会帮帮忙！！

wenny90

宅男-兜着走

选个你比较擅长的Javascript Framework吧。 Mootool ，Prototype ，Jquery 都行。 如果你不选也能做。比较麻烦。
我是用Jquery 的。 就大概大概给你个概念吧。

如果用过Jquery 请Skip Step 1 Step 2

step 1: 做个基本的Form 出来。

1. <script language="javascript" src="jquery.js"></script>
   
2. <form action=http://localhost/urproject method="post">
   
3. <input type="text" name="someVal">
   
4. </form>

复制代码

note：记得加入 jquery.js
http://jquery.com/
这里能下载。

step2 ：这个是初始Jquery

1. <script language="javascript" src="jquery.js"></script>
   
2. <script>
   
3. $(function(){
   
4. 
   
5. })
   
6. </script>
   
7. <form action=http://localhost/urproject method="post">
   
8. <input type="text" name="someVal">
   
9. </form>

复制代码

step 3：加入 <p id="result"></p> 在你的Form下方 然后加入普通的<p></p> 作提示。

1. <script language="javascript" src="jquery.js"></script>
   
2. <script>
   
3. $(function(){
   
4. })
   
5. </script>
   
6. <form action="http://localhost/urproject" method="post">
   
7. <input type="text" name="someVal">
   
8. </form>
   
9. <p>
   
10. length should more than 10.
    
11. </p>
    
12. <p id="result">
    
13. </p>

复制代码

step 4: run 这个program看看。

1. <script language="javascript" src="jquery.js"></script>
   
2. <script>
   
3. $(function(){
   
4. 
   
5. $("input[name=someVal]").blur(function(){ // 当someVal onBlur 的当儿执行。
   
6. 
   
7. if($(this).val().length < 10)$("#result").html("<font color='red'>Invalid input</font>");
   
8. // $(this).val() 的意思是 someVal 的Value, 字数少过十就放出红色的字体，如果是多过10就青色。 这个你应该会。
   
9. 
   
10. else $("#result").html("<font color='green'>Pass !</font>");
    
11. // $("#result").html() 就是~innerHtml. 总之不管是怎样都会写入<p></p> tag之间。
    
12. })
    
13. 
    
14. })
    
15. </script>
    
16. 
    
17. <form action="http://localhost/urproject" method="post">
    
18. <input type="text" name="someVal">
    
19. </form>
    
20. 
    
21. <p>
    
22. length should more than 10.
    
23. </p>
    
24. 
    
25. <p id="result">
    
26. </p>

复制代码

OK~搞定。run 看看就明白了。 至于传入后台就太多了。很累了。要睡觉。

http://www.willjessup.com/sandbo ... /form_validate.html
给你参考个，这个是后台的validation ， 通过Ajax 去后台然后 Validate 了return 回来。

http://speckyboy.com/2009/12/17/ ... es-and-tutorials-2/
这里也有很多教程。

如果不是你要的，可以演示下你要的效果吗？

最后~加油

献丑了。写得不好请多多原谅。em0012" />" />

[ 本帖最后由 宅男-兜着走 于 2010-3-18 03:45 AM 编辑 ]

小恶魔J@YL()NG

那么多资料。。我的就很简单，都是这样的
www.mandarinstories.com的contact
storiesworldwide。com的contact
这样的

wenny90

多谢大家。。。 我会加油！！

FallenAngelz

1. <script type='text/javascript'>
   
2. 
   
3. function formValidator(){
   
4.         // Make quick references to our fields
   
5.         var firstname = document.getElementById('firstname');
   
6.         var addr = document.getElementById('addr');
   
7.         var zip = document.getElementById('zip');
   
8.         var state = document.getElementById('state');
   
9.         var username = document.getElementById('username');
   
10.         var email = document.getElementById('email');
    
11.        
    
12.         // Check each input in the order that it appears in the form!
    
13.         if(isAlphabet(firstname, "Please enter only letters for your name")){
    
14.                 if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
    
15.                         if(isNumeric(zip, "Please enter a valid zip code")){
    
16.                                 if(madeSelection(state, "Please Choose a State")){
    
17.                                         if(lengthRestriction(username, 6, 8)){
    
18.                                                 if(emailValidator(email, "Please enter a valid email address")){
    
19.                                                         return true;
    
20.                                                 }
    
21.                                         }
    
22.                                 }
    
23.                         }
    
24.                 }
    
25.         }
    
26.        
    
27.        
    
28.         return false;
    
29.        
    
30. }
    
31. 
    
32. function notEmpty(elem, helperMsg){
    
33.         if(elem.value.length == 0){
    
34.                 alert(helperMsg);
    
35.                 elem.focus(); // set the focus to this input
    
36.                 return false;
    
37.         }
    
38.         return true;
    
39. }
    
40. 
    
41. function isNumeric(elem, helperMsg){
    
42.         var numericExpression = /^[0-9]+$/;
    
43.         if(elem.value.match(numericExpression)){
    
44.                 return true;
    
45.         }else{
    
46.                 alert(helperMsg);
    
47.                 elem.focus();
    
48.                 return false;
    
49.         }
    
50. }
    
51. 
    
52. function isAlphabet(elem, helperMsg){
    
53.         var alphaExp = /^[a-zA-Z]+$/;
    
54.         if(elem.value.match(alphaExp)){
    
55.                 return true;
    
56.         }else{
    
57.                 alert(helperMsg);
    
58.                 elem.focus();
    
59.                 return false;
    
60.         }
    
61. }
    
62. 
    
63. function isAlphanumeric(elem, helperMsg){
    
64.         var alphaExp = /^[0-9a-zA-Z]+$/;
    
65.         if(elem.value.match(alphaExp)){
    
66.                 return true;
    
67.         }else{
    
68.                 alert(helperMsg);
    
69.                 elem.focus();
    
70.                 return false;
    
71.         }
    
72. }
    
73. 
    
74. function lengthRestriction(elem, min, max){
    
75.         var uInput = elem.value;
    
76.         if(uInput.length >= min && uInput.length <= max){
    
77.                 return true;
    
78.         }else{
    
79.                 alert("Please enter between " +min+ " and " +max+ " characters");
    
80.                 elem.focus();
    
81.                 return false;
    
82.         }
    
83. }
    
84. 
    
85. function madeSelection(elem, helperMsg){
    
86.         if(elem.value == "Please Choose"){
    
87.                 alert(helperMsg);
    
88.                 elem.focus();
    
89.                 return false;
    
90.         }else{
    
91.                 return true;
    
92.         }
    
93. }
    
94. 
    
95. function emailValidator(elem, helperMsg){
    
96.         var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    
97.         if(elem.value.match(emailExp)){
    
98.                 return true;
    
99.         }else{
    
100.                 alert(helperMsg);
     
101.                 elem.focus();
     
102.                 return false;
     
103.         }
     
104. }
     
105. </script>
     
106. 
     
107. <form onsubmit='return formValidator()' >
     
108. First Name: <input type='text' id='firstname' /><br />
     
109. Address: <input type='text' id='addr' /><br />
     
110. Zip Code: <input type='text' id='zip' /><br />
     
111. State: <select id='state'>
     
112.         <option>Please Choose</option>
     
113.         <option>AL</option>
     
114.         <option>CA</option>
     
115.         <option>TX</option>
     
116.         <option>WI</option>
     
117. </select><br />
     
118. Username(6-8 characters): <input type='text' id='username' /><br />
     
119. Email: <input type='text' id='email' /><br />
     
120. <input type='submit' value='Check Form' />
     
121. </form>
     

复制代码

看到的模式：




至于Validation，自己去试试看就知道了

来源：tizag.com

[ 本帖最后由 FallenAngelz 于 2010-3-19 09:17 PM 编辑 ]

wenny90

很可惜，我要的是asp 哦！有谁会吗？？

宅男-兜着走

== 。。。 一样的。
你只要传入你的 ASP 后台然后再return 回来就好了。