配色: 字号:
详解正则表达式表单验证实例
2016-09-03 | 阅:  转:  |  分享 
  


VIP会员注册





用户名:









密码:









确认密码:









手机号码:









座机号码:









邮箱号码:









二代身份证:

















详解正则表达式表单验证实例

首先给大家解释一些符号相关的意义

匹配前面的子表达式零次或多次;^匹配输入字符串的开始位置;$匹配输入字符串的结束位置1./^$/这个是个通用的格式。2.里面输入需要实现的功能。\d匹配一个数字字符,等价于[0-9]+匹配前面的子表达式一次或多次;?匹配前面的子表达式零次或一次;下面通过一段代码给大家分析表单验证正则表达式,具体代码如下:

?

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







正则验证常用表单方法



functionfocus_username(){

varresultObj=document.getElementById(''result_username'');

resultObj.innerHTML="以字母开头的-位的字符";

resultObj.style.color="blue";

document.form.username.style="border:pxsolidred";

}

//functionblur_username(){

//第一种方法:

//varresultObj=document.getElementById(''result_username'')

//if(document.form.username.value==''''){

//resultObj.innerHTML="用户名不能为空";

//resultObj.style.color="red";

//returnfalse;

//}elseif(document.form.username.value.length<||document.form.username.value.length>){

//resultObj.innerHTML="用户名字符长度必须介于到个之间";

//resultObj.style.color="red";

//returnfalse;

//}else{

//resultObj.innerHTML="ok";

//resultObj.style.color="green";

//}

//}

functionblur_username(){

//第二种方法:

varresultObj=document.getElementById(''result_username'')

varpre=documwww.hunanwang.netue;

varreg=/^[a-zA-Z]\w{,}$/;

if(pre==''''){

resultObj.innerHTML="(必填项)用户名不能为空";

resultObj.style.color="red";

returnfalse;

}elseif(!reg.test(pre)){

resultObj.innerHTML="用户名字符输入不合法";

resultObj.style.color="red";

returnfalse;

}else{

resultObj.innerHTML="ok";

resultObj.style.color="green";

returntrue;

}

}

functionfocus_userpwd(){

varresultObj=document.getElementById(''result_userpwd'');

resultObj.innerHTML="(必填项)介于-位的非特殊字符";

resultObj.style.color="blue";

document.form.userpwd.style="border:pxsolidred";

}

//functionblur_userpwd(){

//varresultObj=document.getElementById(''result_userpwd'')

//if(docum/www.visa158.comue==''''){

//resultObj.innerHTML="用户名密码不能为空";

//resultObj.style.color="red";

//returnfalse;

//}elseif(document.form.userpwd.value.length<||document.form.userpwd.value.length>){

//resultObj.innerHTML="用户名密码字符长度必须介于到个之间";

//resultObj.style.color="red";

//returnfalse;

//}else{

//resultObj.innerHTML="ok";

//resultObj.style.color="green";

//returntrue;

//}

//}

functionblur_userpwd(){

varresultObj=document.getElementById(''result_userpwd'')

varpre=document.form.userpwd.value;

varreg=/^\w{,}$/;

if(pre==''''){

resultObj.innerHTML="(必填项)用户名密码不能为空";

resultObj.style.color="red";

returnfalse;

}elseif(!reg.test(pre)){

resultObj.innerHTML="用户名密码字符输入不合法";

resultObj.style.color="red";

returnfalse;

}else{

resultObj.innerHTML="ok";

resultObj.style.color="green";

returntrue;

}

}

functionfocus_userpwd(){

varresultObj=document.getElementById(''result_userpwd'');

resultObj.innerHTML="(必填项)介于-位的非特殊字符";

resultObj.style.color="blue";

document.form.userpwd.style="border:pxsolidred";

}

//functionblur_userpwd(){

//varresultObj=document.getElementById(''result_userpwd'')

//if(document.form.userpwd.value==''''){

//resultObj.innerHTML="用户名密码不能为空";

//resultObj.style.color="red";

//returnfalse;

//}elseif(document.form.userpwd.value!=document.form.userpwd.value){

//resultObj.innerHTML="两次用户名密码输入不一致";

//resultObj.style.color="red";

//returnfalse;

//}else{

//resultObj.innerHTML="ok";

//resultObj.style.color="green";

//returntrue;

//}

//}

functionblur_userpwd(){

varresultObj=document.getElementById(''result_userpwd'')

varpre=document.form.userpwd.value;

varreg=/^\w{,}$/;

if(pre==''''){

resultObj.innerHTML="(必填项)用户名密码不能为空";

resultObj.style.color="red";

returnfalse;

}elseif(!reg.test(pre)){

resultObj.innerHTML="用户名密码字符输入不合法";

resultObj.style.color="red";

returnfalse;

}elseif(document.form.userpwd.value!=document.form.userpwd.value){

resultObj.innerHTML="两次用户名密码输入不一致";

resultObj.style.color="red";

returnfalse;

}else{resultObj.innerHTML="ok";

resultObj.style.color="green";

returntrue;

}

}

functionfocus_Mobile(){

varresultObj=document.getElementById(''result_Mobile'');

resultObj.innerHTML="请输入你位数的手机号码";

resultObj.style.color="blue";

document.form.Mobile.style="border:pxsolidred";

}

functionblur_Mobile(){

varresultObj=document.getElementById(''result_Mobile'')

varpre=document.form.Mobile.value;

varreg=/^[||][-]{}$/;

if(pre==''''){

resultObj.innerHTML="手机号码不能为空";

resultObj.style.color="red";

}elseif(!reg.test(pre)){

resultObj.innerHTML="手机号码字符输入不合法";

resultObj.style.color="red";

}else{

resultObj.innerHTML="ok";

resultObj.style.color="green";

}

}

functionfocus_Tel(){

varresultObj=document.getElementById(''result_Tel'');

resultObj.innerHTML="请输入你的座机号码";

resultObj.style.color="blue";

document.form.Tel.style="border:pxsolidred";

}

functionblur_Tel(){

varresultObj=document.getElementById(''result_Tel'')

varpre=document.form.Tel.value;

varreg=/^{}[-]{,}\-[]?[-]{}$/;

if(pre==''''){

resultObj.innerHTML="座机号码不能为空";

resultObj.style.color="red";

}elseif(!reg.test(pre)){

resultObj.innerHTML="座机号码字符输入不合法";

resultObj.style.color="red";

}else{

resultObj.innerHTML="ok";

resultObj.style.color="green";

}

}

functionfocus_mail(){

varresultObj=document.getElementById(''result_mail'');

resultObj.innerHTML="请输入你的邮箱号码";

resultObj.style.color="blue";

document.form.mail.style="border:pxsolidred";

}

functionblur_mail(){

varresultObj=document.getElementById(''result_mail'');

varpre=document.form.mail.value;

varreg=/^[a-zA-Z-][a-zA-Z-\._]+@[a-z-]+\.(com)(\.(cn))?$/;

if(pre==''''){

resultObj.innerHTML="邮箱号码不能为空";

resultObj.style.color="red";

}elseif(!reg.test(pre)){

resultObj.innerHTML="邮箱号码字符输入不合法";

resultObj.style.color="red";

}else{

resultObj.innerHTML="ok";

resultObj.style.color="green";

}

}

functionfocus_ID(){

varresultObj=document.getElementById(''result_ID'');

resultObj.innerHTML="(必填项)请输入你位的二代身份证号码";

resultObj.style.color="blue";

document.form.ID.style="border:pxsolidred";

}

functionblur_ID(){

varresultObj=document.getElementById(''result_ID'');

varpre=document.form.ID.value;

varreg=/^[-]{}[-x]$/;

if(pre==''''){

resultObj.innerHTML="(必填项)二代身份证号码字符不能为空";

resultObj.style.color="red";

returnfalse;

}elseif(!reg.test(pre)){

resultObj.innerHTML="二代身份证号码字符输入不合法";

resultObj.style.color="red";

returnfalse;

}else{

resultObj.innerHTML="ok";

resultObj.style.color="green";

returntrue;

}

}

functioncheckForm(){

varflag_username=blur_username();

varflag_userpwd=blur_userpwd();

varflag_userpwd=blur_userpwd();

varflag_ID=blur_ID();

if(flag_username==true&&flag_userpwd==true&&flag_userpwd==true&&flag_ID==true){

returntrue;

}else{

returnfalse;

}

}





body{background-image:url(images/.jpg);background-size:cover;}

table{margin-left:px;margin-top:px;background-image:url(images/.jpg);background-size:cover;box-shadow:pxpxpx#C}

.vip{font-size:px;}

















以上内容就是表单验证正则表达式实例代码,希望对大家有帮助。



献花(0)
+1
(本文系白狐一梦首藏)
类似文章 更多
发表评论: