我有一个javascript文件,我创建它以便如下工作: - 它将验证在我的html表单的字段中输入的名称和电子邮件。如果电子邮件或名称无效,javascript将向用户发出警报并警告他您输入的电子邮件或姓名无效。
无论如何,此警报将加速“onBlur”。(当光标退出名称和电子邮件字段时)
我想删除“onBLur”标签。我希望验证在表单填写结束时进行,当用户单击“提交”时。
怎么做?我必须用哪个标签代替“onBlur”? 顺便说一句,我尝试用“onClick”替换“onBlur”:当我点击字段填充它时出现警报。
这是我的html **
中的head和/ head标签之间的javascript<script language=javascript>
<!--
function ValidateAll()
{
if(CheckName(document.dForm.name.value) == false) return false;
if(CheckEmail(document.dForm.email.value) == false) return false;
return true;
}
function StripSpacesFromEnds(s)
{
while((s.indexOf(' ',0) == 0) && (s.length > 1))
{
s = s.substring(1,s.length);
}
while((s.lastIndexOf(' ') == (s.length - 1) && (s.length > 1)))
{
s = s.substring(0,(s.length - 1));
}
if((s.indexOf(' ',0) == 0) && (s.length == 1)) s = '';
return s;
}
function IsItPresent(s,explanation)
{
s = StripSpacesFromEnds(s);
if(s.length) return s;
alert('Please enter ' + explanation + '.');
return '';
}
function CheckName(s_name)
{
s_name = IsItPresent(s_name,'your name');
if(! s_name) return false;
var i = s_name.indexOf(' ',0);
while(i > -1)
{
s_name = s_name.substring(0,(i + 1)) +
s_name.substring((i + 2),s_name.length);
i = s_name.indexOf(' ',0);
}
s_name = s_name.toLowerCase();
var s = new String(s_name.substring(0,1));
s = s.toUpperCase();
s_name = s + s_name.substring(1,s_name.length);
i = s_name.indexOf(' ',0);
if(i == (s_name.length - 1)) i = -1;
var ts = new String("");
var j = 0;
while(i > -1)
{
i++;
j = i + 1;
s = s_name.substring(i,j);
s = s.toUpperCase();
ts = '';
if(i > 0) ts = s_name.substring(0,i);
s_name = ts + s + s_name.substring(j,s_name.length);
i = s_name.indexOf(' ',j);
if(i == (s_name.length - 1)) i = -1;
}
document.dForm.name.value = s_name;
return true;
}
function CheckEmail(s_email)
{
s_email = IsItPresent(s_email,'your email address');
if(! s_email) return false;
var i = s_email.indexOf(' ',0);
while(i > -1)
{
s_email = s_email.substring(0,i) +
s_email.substring((i + 1),s_email.length);
i = s_email.indexOf(' ',0);
}
document.dForm.email.value = s_email;
if((s_email.length < 6) ||
(s_email.indexOf('@',0) < 1) ||
(s_email.lastIndexOf('@') != s_email.indexOf('@',0)) ||
(s_email.lastIndexOf('@') > (s_email.length - 5)) ||
(s_email.lastIndexOf('.') > (s_email.length - 3)) ||
(s_email.lastIndexOf('.') < (s_email.length - 4)) ||
(s_email.indexOf('..',0) > -1) ||
(s_email.indexOf('@.',0) > -1) ||
(s_email.indexOf('.@',0) > -1) ||
(s_email.indexOf(',',0) > -1))
{
alert('The email address "' + s_email + '" is not valid.');
return false;
}
return true;
}
// -->
</script>
这是html表单(没有head和/ head标签之间的javascript
<html>
<head>
<style type=text/css>
.inputtext { width: 300px; height:30px; }
<!--
.button {
display:block;
font-weight:bold;
font-size:18px;
font-family:Calibri;
color:#009933;
background-color:#ffffff;
width:150px;
text-align:center;
padding:4px;
border-top: 1px solid #b2b2b2;
border-bottom: 1px solid #b2b2b2;
border-left: 1px solid #b2b2b2;
border-right: 1px solid #b2b2b2;
}
-->
</style></head>
<form name="dForm" action="script.cgi" method="POST">
<div align=center>
<Table border=0><tr><td>
<table border=0>
<tr>
<td valign=top><h3><font face=calibri color=#009933>Full name<font face=calibri color=red>*</font> </h3></td>
<td valign=top><input onBlur="CheckName(document.dForm.name.value)" name="name" type="text" class=inputtext></td>
</tr>
<tr>
<td valign=top><font face=calibri color=#009933><h3>Email address<font face=calibri color=red>*</font></h3></td>
<td valign=top><input onBlur="CheckEmail(document.dForm.email.value)" name="email" type="text" class=inputtext></td>
</tr>
<tr>
<td valign=top><font face=calibri color=#009933><h3>Select your gender</h3></font></td>
<td valign=top><font face=calibri><input type="radio" name="gender" value="Male"> Male       <input type=radio name=gender value=Female> Female</font></td>
</tr>
<tr>
<td valign=top><font face=calibri color=#009933><h3>Select your age</h3></font></td>
<td valign=top><select name="age" size=1>
<option value=Below18>Below 18</option>
<option value=18>18</option>
<option value=19>19</option>
<option value=20>20</option>
<option value=21>21</option>
<option value=22>22</option>
<option value=23>23</option>
<option value=24>24</option>
<option value=25>25</option>
<option value=26>26</option>
<option value=27>27</option>
<option value=28>28</option>
<option value=29>29</option>
<option value=30>30</option>
<option value=31>31</option>
<option value=32>32</option>
<option value=33>33</option>
<option value=34>34</option>
<option value=35>35</option>
<option value=36>36</option>
<option value=37>37</option>
<option value=38>38</option>
<option value=39>39</option>
<option value=40>40</option>
<option value=41>41</option>
<option value=42>42</option>
<option value=43>43</option>
<option value=44>44</option>
<option value=45>45</option>
<option value=46>46</option>
<option value=47>47</option>
<option value=48>48</option>
<option value=49>49</option>
<option value=50>50</option>
<option value=51>51</option>
<option value=52>52</option>
<option value=53>53</option>
<option value=54>54</option>
<option value=55>55</option>
<option value=56>56</option>
<option value=57>57</option>
<option value=58>58</option>
<option value=59>59</option>
<option value=60>60</option>
<option value=61>61</option>
<option value=62>62</option>
<option value=63>63</option>
<option value=64>64</option>
<option value=65>65</option>
<option value=66>66</option>
<option value=67>67</option>
<option value=68>68</option>
<option value=69>69</option>
<option value=70>70</option>
<option value=71>71</option>
<option value=72>72</option>
<option value=73>73</option>
<option value=74>74</option>
<option value=75>75</option>
<option value=76>76</option>
<option value=77>77</option>
<option value=78>78</option>
<option value=79>79</option>
<option value=80>80</option>
<option value=81>81</option>
<option value=82>82</option>
<option value=83>83</option>
<option value=84>84</option>
<option value=85>85</option>
<option value=86>86</option>
<option value=87>87</option>
<option value=88>88</option>
<option value=89>89</option>
<option value=90>90</option>
<option value=91>91</option>
<option value=92>92</option>
<option value=93>93</option>
<option value=94>94</option>
<option value=95>95</option>
<option value=96>96</option>
<option value=97>97</option>
<option value=98>98</option>
<option value=99>99</option>
</select></td>
</tr>
</table>
<br><br>
<table border=0>
<tr><td valign=top>
<font face=calibri color=#009933><h3>1) From where did you hear about Angrybullet2 ?</h3></font>
<font face=calibri color=black><input type=radio name=hear-about value=Search_engines> Search engines (google, yahoo, bing, … )<br>
<input type=radio name=hear-about value=Fromafriend> From a friend<br>
<input type=radio name=hear-about value=FromYouTube> From YouTube<br>
<input type=radio name=hear-about value=Other> Other</font>
<br><br>
<font face=calibri color=#009933><h3>2) Are you subscribed to Angrybullet2 ?</h3></font>
<font face=calibri color=black>
<input type=radio name=sub-or-not value=Yes> Yes, I am<br>
<input type=radio name=sub-or-not value=No,but_I_wish_to_subscribe> No, but I wish to subscribe<br>
<input type=radio name=sub-or-not value=No,I_am_not,and_I_won't_subscribe> No, I am not, and I won't subscribe<br>
<input type=radio name=sub-or-not value=No_account> I don't have a YouTube account</font>
<br><br>
<font face=calibri color=#009933><h3>3) How many videos of Angrybullet2 did you watch ?</h3></font>
<font face=calibri color=black><input type=radio name=n videos watched value=None> None<br>
<input type=radio name=n-vids-watched value=1-2> 1-2<br>
<input type=radio name=n-vids-watched value=3-4> 3-4<br>
<input type=radio name=n-vids-watched value=5-9> 5-9<br>
<input type=radio name=n-vids-watched value=10_and_more> 10 and more</font>
<br><br>
<font face=calibri color=#009933><h3>4) Did you enjoy watching videos from Angrybullet2 ?</h3></font>
<font face=calibri color=black>
<input type=radio name=enjoy-or-not value=Yes,I_did> Yes, I did<br>
<input type=radio name=enjoy-or-not value=No,I_didn't> No, I didn't<br>
<input type=radio name=enjoy-or-not value=I_watched_none_of_your_videos> I watched none of your videos</font>
<br><br>
<font face=calibri color=#009933><h3>5) What was the type of the video(s) you watched ?</h3>Do not answer if you watched none of my videos</font><br>
<font face=calibri color=black>
<input type=checkbox name=vid-type[] value=Tutorial(s)> Tutorial(s) (how to)<br>
<input type=checkbox name=vid-type[] value=Sound effect(s)> Sound effect(s)<br>
<input type=checkbox name=vid-type[] value=Experiment(s)> Experiment(s)<br>
<br><br>
<font face=calibri color=#009933><h3>6) Do you have any suggestion in order to make Angrybullet2 better ?</h3></font>
<textarea rows="10" cols="75" name="suggestions"></textarea></td></tr></table>
<table border=0><tr><td valign=top>
<input onClick="return ValidateAll()" type="submit" value="Submit survey" class=button></td><td><input type="reset" value="Reset survey fields" class=button></td></tr></table>
</td></tr></Table>
</form>
</div>
</html>
任何帮助将不胜感激。提前感谢您的帮助和时间
答案 0 :(得分:0)
只需从代码中删除onBlur="CheckName(document.dForm.name.value)"
即可。当您提交页面时,验证将会启动。