4-8 练习, 代码还有那些需要优化的地方,给点意见

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

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
 
<style>
* {
margin: 0px;
padding: 0px;
}
 
.reg {
margin: 100px auto;
text-align: center;
/*div中的内容剧中*/
}
 
.reg table td {
height: 40px;
}
 
.reg table tr td:first-child {
text-align: right;
}
 
.reg table tr td:nth-child(2) input,
.reg table tr td:nth-child(2) select {
margin-left: 30pxl
}
 
.title {
padding: 0px;
margin: 0px;
background-color: blue;
color: white;
}
</style>
</head>
 
<body>
<div class="title">
<h5>用户注册</h5>
</div>
<div id='reg' class="reg">
<form>
<table cellpadding='0' cellspacing='0'>
 
<tr>
<td width='120px'> 用户名:</td>
<td width='220px'><input type="text" id="username" placeholder="6-20位字母、数字或_" onblur=""></td>
<td width='210px'><span id="usernameProm" style="color: red" title="6-20位字母、数字或_"></span></td>
</tr>
 
<tr>
<td width='120px'> 登录密码:</td>
<td width='220px'><input type="password" id="passwordS"></td>
<td width='210px'><span id="passwordSProm" style="color: red" title="6-18位，包括数字字母或符号"></span></td>
</tr>
 
<tr>
<td width='120px'> 确认密码:</td>
<td width='220px'><input type="password" id="passwordE"></td>
<td width='210px'><span id="passwordEProm" style="color: red" title="两次输入密码不一致"></span></td>
</tr>
 
<tr>
<td width='120px'> 姓名:</td>
<td width='220px'><input type="text" id="name"></td>
<td width='210px'><span id="nameProm" style="color: red" title="两位到四位的中文汉字"></span></td>
</tr>
 
<tr>
<td width='120px'> 性别:</td>
<td width='220px'><select id="sex" class="sex">
<option value="男">男</option>
<option value="女">女</option>
</select></td>
</tr>
 
<tr>
<td width='120px'>身份证号码:</td>
<td width='220px'><input type="text" id="number"></td>
<td width='210px'><span id="numberProm" style="color: red" title="身份证格式不正确"></span></td>
</tr>
 
<tr>
<td width='120px'> 邮箱:</td>
<td width='220px'><input type="email" id="email"></td>
<td width='210px'><span id="emailProm" style="color: red" title="邮箱格式错误"></span></td>
</tr>
 
<tr>
<td width='120px'> 手机号码:</td>
<td width='220px'><input type="number" id="phone"></td>
<td width='210px'><span id="phoneProm" style="color: red" title="手机号格式错误"></span></td>
</tr>
<tr>
<td colspan="3" height='30'></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="提交" class="btn" id="btn" /></td>
</tr>
</table>
</form>
</div>
 
<script>
(function () {
var username = document.getElementById('username');
var passwordS = document.getElementById('passwordS');
var passwordE = document.getElementById('passwordE');
var name = document.getElementById('name');
var number = document.getElementById('number');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
 
var phoneProm = document.getElementById('phoneProm');
var usernameProm = document.getElementById('usernameProm');
var passwordSProm = document.getElementById('passwordSProm');
var passwordEProm = document.getElementById('passwordEProm');
var nameProm = document.getElementById('nameProm');
var numberProm = document.getElementById('numberProm');
var emailProm = document.getElementById('emailProm');
var phoneProm = document.getElementById('phoneProm');
 
username.addEventListener('blur', function () {
regexpUserName(this.value);
});
 
function regexpUserName(value) {
var pattern = /^[A-Za-z]\w{5,19}$/;
console.log(pattern.exec(value));
var result = pattern.test(value);
if (!result) {
usernameProm.innerHTML = usernameProm.title;
} else {
usernameProm.innerHTML = 'OK';
}
console.log("regexpUserName",value,result);
return result;
}
 
passwordS.addEventListener('blur', function () {
regexpPassword(this.value);
});
 
function regexpPassword(value) {
var pattern = /^\S{6,18}$/;
var result = pattern.test(value);
if (!result) {
passwordSProm.innerHTML = passwordSProm.title;
} else {
passwordSProm.innerHTML = 'OK';
}
console.log("regexpPassword",value,result);
return result;
}
passwordE.addEventListener('blur', function () {
regexpPasswordE(this.value);
});
 
function regexpPasswordE(value) {
console.log("regexpPasswordE:"+value);
if (value === 'undefined' || value === null || value === '') {
passwordEProm.innerHTML = passwordEProm.title;
return false;
}
var result = passwordS.value === value;
if (!result) {
passwordEProm.innerHTML = passwordEProm.title;
} else {
passwordEProm.innerHTML = 'OK';
}
console.log("regexpPasswordE",value,result);
return result;
}
name.addEventListener('blur', function () {
regexpName(this.value);
});
 
function regexpName(value) {
var pattern = /^[\u4e00-\u9fa5]{2,4}$/;
console.log(pattern.exec(value));
var result = pattern.test(value);
if (!result) {
nameProm.innerHTML = nameProm.title;
} else {
nameProm.innerHTML = 'OK';
}
console.log("regexpName",value,result);
return result;
}
number.addEventListener('blur', function () {
regexpNumber(this.value);
});
 
function regexpNumber(value) {
var pattern = /^\d{17}[0-9x]$/;//结尾x如何判断?
console.log(pattern.exec(value));
var result = pattern.test(value);
if (!result) {
numberProm.innerHTML = numberProm.title;
} else {
numberProm.innerHTML = 'OK';
}
console.log("regexpNumber",value,result);
return result;
}
email.addEventListener('blur', function () {
regexpEmail(this.value);
});
 
function regexpEmail(value) {
var pattern = /^[a-z0-9]+(?:[.-_][a-z0-9]+)*@[a-z0-9]+([.-_][a-z0-9]+)*\.[a-z]{2,4}$/;
var result = pattern.test(value);
if (!result) {
emailProm.innerHTML = emailProm.title;
} else {
emailProm.innerHTML = 'OK';
}
console.log("regexpEmail",value,result);
return result;
}
// phone.onblur(function () {
 
// });
phone.addEventListener('blur', function () {
regexpPhone(this.value);
});
 
function regexpPhone(value) {
var pattern = /^(?:13[0-9]|147|15[012356789]|18[0256789]|17[0-9])\d{8}$/;
var result = pattern.test(value);
console.log('====================================');
console.log(pattern.exec(value));
console.log('====================================');
if (!result) {
phoneProm.innerHTML = phoneProm.title;
} else {
phoneProm.innerHTML = 'OK';
}
console.log("regexpPhone",value,result);
return result;
}
 
/**
             * 点击提交按钮 验证是否全部合法
             */
function formInput() {
if (!regexpUserName(username.value) || !regexpEmail(email.value) || !regexpName(name.value) || !regexpNumber(number.value)
|| !regexpPassword(passwordS.value) || !regexpPasswordE(passwordE.value) || !regexpPhone(phone.value)) {
alert('验证失败');
} else {
alert('验证成功');
}
}
 
var btn = document.getElementById('btn');
 
btn.onclick = formInput;
})();
</script>
 
</body>
 
</html>