您的位置：首页 > Web前端 > HTML

表单的验证

2015-07-20 00:46 302 查看
 HTML Code 
1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

<!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="Content-Type" content="text/html; charset=UTF-8" />

  <title>Insert title here</title>
</head>

<body>

  <form action="#" method="get" onsubmit="return tiJiao()">

    <table align="center">

      <caption>

        欢迎注册

      </caption>

      <tr>

        <td>用户名：</td>

        <td><input type="text" name="userName" id="userName" value="请输入用户名" onblur="blurName(this);" onfocus="focusName(this);" /><span id="sapn_name"></span></td>

      </tr>

      <tr>

        <td>密码：</td>

        <td><input type="password" name="pwd" id="pwd" onblur="blurPwd(this);" onkeypress="return onkeypressPwd(this,event);" /><span id="sapn_pwd"></span></td>

      </tr>

      <tr>

        <td>重复密码：</td>

        <td><input type="password" name="repwd" onblur="blurRePwd(this);" onkeypress="return onkeypressRePwd(this,event);" /><span id="sapn_repwd"></span></td>

        <td></td>

      </tr>

      <tr>

        <td>手机号码：</td>

4000

        <td><input type="text" name="tel" id="tel" onblur="blurTel(this);" onkeyup="return onkeyupTel(this,event);" /><span id="sapn_tel"></span></td>

        <td></td>

      </tr>

      <tr>

        <td>邮箱：</td>

        <td><input type="text" name="email" id="email" onblur="blurEmail(this);" onkeypress="return onkeypressEmail(this,event);" /><span id="sapn_email"></span></td>

        <td></td>

      </tr>

      <tr>

        <!-- <td>用户名：</td> -->

        <td colspan="2" align="center"><input type="submit" value="注册" /> <input type="reset" value="重置" onclick="clearAll();" /></td>

      </tr>

    </table>

  </form><script type="text/javascript">
//<![CDATA[

        var sapn_name_ele = document.getElementById("sapn_name");

        var sapn_pwd_ele = document.getElementById("sapn_pwd");

        var sapn_repwd_ele = document.getElementById("sapn_repwd")

        var sapn_tel_ele = document.getElementById("sapn_tel");

        var sapn_email_ele = document.getElementById("sapn_email");

        //判断每一个是不是校验成功

        var name_flag = false;

        var pwd_flag = false;

        var rePwd_flag = false;

        var tel_flag = false;

        var eamil_flag = false;

        //规则

                var reg_name = /^\w{6,8}$/;

                //用户密码规则8位数字

                var reg_pwd = /^[0-9]{8}$/;

                //手机号码规则11位，1开头

                var reg_tel=/^1[0-9]{10}$/;

                //邮箱规则1235@qq.com

                var reg_email =/^\w{2,20}@\w{1,8}(.\w{2,5}){1,3}$/;

                

        

                //校验用户名

                function focusName(obj)

                {

                        var nowValue = obj.value;

                        if(obj.value=="请输入用户名")

                        {

                                obj.value="";

                        }

                }

                function blurName(obj)

                {

                        //alert(event.value);

                        if(obj.value=="")

                        {

                                //sapn_name_ele.innerHTML = ""

                                obj.value="请输入用户名";

                                //当出现上一次有提示之后删除用户名时

                                sapn_name_ele.innerHTML="";

                        }else{

                                var b = reg_name.test(obj.value);

                                //alert(b);

                                if(b)//如果判断正确，即用户名合适

                                {

                                        sapn_name_ele.innerHTML="<font size='2px' color='blue'>"+"用户名正确"+"<\/font>";

                                        name_flag=true;

                                }else

                                {

                                        sapn_name_ele.innerHTML="<font size='2px' color='red'>"+"用户名不正确"+"<\/font>";

                                }

                        }

                }

                //校验密码，密码为8位数字

                

                function blurPwd(obj)

                {

                        var b =reg_pwd.test(obj.value);

                        if(b)

                        {

                                //说明用户密码设置成功

                                sapn_pwd_ele.innerHTML="<font size='2px' color='blue'>"+"密码设置正确"+"<\/font>";

                                pwd_flag = true;

                        }else

                        {

                                sapn_pwd_ele.innerHTML="<font size='2px' color='red'>"+"密码设置不正确"+"<\/font>";

                        }

                        if(obj.value=="")

                        {

                                sapn_pwd_ele.innerHTML="";

                        }

                        

                }

                function onkeypressPwd(obj,event)

                {

                        

                        //alert(b);

                        //alert(event.keyCode);

                        var key = event.keyCode;

                        //如果键盘输入的是数字

                        //alert(key);

                        if(key<=57 && key>=48)

                        {

                                return true;

                        }else

                        {

                                return false;

                        }

                }

                //校验重复密码

                function blurRePwd(obj)

                {

                //alert("a");

                        var b =reg_pwd.test(obj.value);

                        var pwd = document.getElementById("pwd");

                        //alert(pwd.value);

                        if(b)

                        {

                                //说明用户密码设置成功

                                if(obj.value==pwd.value)

                                {

                                sapn_repwd_ele.innerHTML="<font size='2px' color='blue'>"+"密码设置正确"+"<\/font>";

                                rePwd_flag = true;

                                }else

                                {

                                        sapn_repwd_ele.innerHTML="<font size='2px' color='red'>"+"密码设置不正确"+"<\/font>";

                                }

                        }else

                        {

                                sapn_repwd_ele.innerHTML="<font size='2px' color='red'>"+"密码设置不正确"+"<\/font>";

                        }

                        if(obj.value=="")

                        {

                                sapn_repwd_ele.innerHTML="";

                        }

                        

                }

                function onkeypressRePwd(obj,event)

                {

                        

                        //alert(b);

                        //alert(event.keyCode);

                        var key = event.keyCode;

                        //如果键盘输入的是数字

                        //alert(key);

                        if(key<=57 && key>=48)

                        {

                                return true;

                        }else

                        {

                                return false;

                        }

                }

                //校验电话号码

                function blurTel(obj)

                {

                        //规则

                        var b =reg_tel.test(obj.
c3c0
value);

                        //alert(b);

                        if(b)

                        {

                                //说明用户密码设置成功

                                sapn_tel_ele.innerHTML="<font size='2px' color='blue'>"+"号码设置正确"+"<\/font>";

                                tel_flag = true;

                        }else

                        {

                                sapn_tel_ele.innerHTML="<font size='2px' color='red'>"+"号码设置不正确"+"<\/font>";

                        }

                        if(obj.value=="")

                        {

                                sapn_tel_ele.innerHTML="";

                        }

                        

                }

                function onkeyupTel(obj,event)

                {

                        

                        //alert(b);

                        //alert(event.keyCode);

                        /* var key = event.keyCode;

                        //如果键盘输入的是数字

                        //alert(key);

                        if(key<=57 && key>=48)

                        {

                                return true;

                        }else

                        {

                                return false;

                        } */

                        if(!(event.keyCode<=57 && event.keyCode>=48))

                {

                        obj.value = obj.value.substring(0,obj.value.length-1);

                }

                

                }

                //校验邮箱

                function blurEmail(obj)

                {

                        //规则

                        var b =reg_email.test(obj.value);

                        //alert(b);

                        if(b)

                        {

                                //说明用户密码设置成功

                                sapn_email_ele.innerHTML="<font size='2px' color='blue'>"+"邮箱设置正确"+"<\/font>";

                                eamil_flag = true;

                        }else

                        {

                                sapn_email_ele.innerHTML="<font size='2px' color='red'>"+"邮箱设置不正确"+"<\/font>";

                        }

                        if(obj.value=="")

                        {

                                sapn_email_ele.innerHTML="";

                        }

                        

                }

                function tiJiao()

                {

                /* var name_flag = false;

                var pwd_flag = false;

                var rePwd_flag = false;

                var tel_flag = false;

                var eamil_flag = false; */

                        return name_flag && pwd_flag && rePwd_flag && tel_flag && eamil_flag;

                }

                /* file:///D:/Workspaces/webSpace/day3_Test/src/cn/deno/checkForm.html?

                userName=fei11111&pwd=11111111&repwd=11111111&tel=11111111111&email=111%40qq.com# */

                function clearAll()

                {

                        sapn_name_ele.innerHTML="";

                        sapn_pwd_ele.innerHTML="";

                        sapn_repwd_ele.innerHTML="";

                        sapn_tel_ele.innerHTML="";

                        sapn_email_ele.innerHTML="";

                }

  //]]>

  </script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML form 验证 初学者
相关文章推荐
新的分享
章节导航