|登录 |注册

JBTALKS.CC»论坛 › JBTALKS FORUMS › 【电脑世界】 › 网页编程 › (javascript)Validation有谁会帮帮忙！！
返回列表 发新帖
查看: 3168|回复: 6
打印 上一主题 下一主题

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

 关闭 [复制链接]
wenny90
2010-3-18 01:26 AM

回复 #1 wenny90 的帖子

宅男-兜着走
2010-3-18 03:00 AM
选个你比较擅长的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(){

  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(){

  5. $("input[name=someVal]").blur(function(){ // 当someVal onBlur 的当儿执行。

  7. if($(this).val().length < 10)$("#result").html("<font color='red'>Invalid input</font>");
  8. // $(this).val() 的意思是 someVal 的Value, 字数少过十就放出红色的字体，如果是多过10就青色。 这个你应该会。

  10. else $("#result").html("<font color='green'>Pass !</font>");
  11. // $("#result").html() 就是~innerHtml. 总之不管是怎样都会写入<p></p> tag之间。
  12. })

  14. })
  15. </script>

  17. <form action="http://localhost/urproject" method="post">
  18. <input type="text" name="someVal">
  19. </form>

  21. <p>
  22. length should more than 10.
  23. </p>

  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
2010-3-18 09:15 AM
那么多资料。。我的就很简单，都是这样的
www.mandarinstories.com的contact
storiesworldwide。com的contact
这样的
wenny90
2010-3-18 11:18 PM
多谢大家。。。 我会加油！！
FallenAngelz
2010-3-19 09:16 PM
  1. <script type='text/javascript'>

  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. }

  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. }

  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. }

  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. }

  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. }

  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. }

  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. }

  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>

  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 编辑 ]

回复 #2 宅男-兜着走 的帖子

wenny90
2010-3-20 02:15 PM
很可惜，我要的是asp 哦！有谁会吗？？

回复 #6 wenny90 的帖子

宅男-兜着走
2010-3-20 02:23 PM
== 。。。 一样的。
你只要传入你的 ASP 后台然后再return 回来就好了。
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

JBTALKS.CC |联系我们 |隐私政策 |Share

GMT+8, 2025-4-19 10:25 PM , Processed in 0.098711 second(s), 25 queries .

Powered by Discuz! X2.5 © 2001-2012 Comsenz Inc.

本论坛言论纯属发表者个人意见，与本论坛立场无关
Copyright © 2003-2012 JBTALKS.CC All Rights Reserved

Dedicated Server powered by iCore Technology Sdn. Bhd.

合作联盟网站:
JBTALKS 马来西亚中文论坛 | JBTALKS我的空间 | ICORE TECHNOLOGY SDN. BHD.
回顶部