js实现表单及时验证功能用户信息立即验证

问题：表单怎么在输入后立即验证，而不是提交后再验证那么不方便（网上搜到的要么是模棱两可，要么是残缺不全…）

方法：鉴于此，小可，水山奇，将其代码补全，加上小可我个人的理解（注释）在上面，仅供后来者少走弯路，也请各路好汉批评指正…（转发请注作者,xiexie）————table表格版，以后会继续有JQuery版…

如果帮助到您，顶一下ヾ(≧O≦)〃嗷~

截图：

代码：

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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>用户注册</title>

<link rel="stylesheet" href="css/style.css" />

<script type="text/javascript">

//及时验证用户名

function checkuse(){

//在每个函数中定义check变量是为了在表单提交后，能够逐个验证每个函数是否通过，很好很好。（以下同理）

var check;

var username = document.getElementById("username").value;

if (username.length > 18 || username.length < 6) {

alert("用户名输入不合法，请重新输入！");

//此处甚妙，既然你在此处输入错误，那么按理说当然要在此处继续输入了。（在此处继续获取焦点！）

document.getElementById("username").focus();

check = false;

} else {

document.getElementById("checktext1").innerHTML = "* 用户名由6-18位字符组成 √";

check = true;

}

return check;

}

//利用正则表达式判断密码符合否

function checkpwd() {

var check;

var reg = /[^A-Za-z0-9_]+/;

var regs = /^[a-zA-Z0-9_\u4e00-\u9fa5] + $ /;

var password = document.getElementById("password").value;

if (password.length < 6 || password.length > 18 || regs.test(password)) {

alert("密码输入不合法，请重新输入！");

document.getElementById("password").focus();

check = false;

} else {

document.getElementById("checktext2").innerHTML = "* 密码由6-18位字符组成，且必须包含字母、数字和标点符号 √";

check = true;

}

return check;

}

//验证密码是否不一致！

function checkpwdc() {

var check;

var password = document.getElementById("password").value;

var pwdc = document.getElementById("pwdc").value;

if (password != pwdc) {

alert("两次输入密码不一致，请重新输入！");

document.getElementById("pwdc").focus();

check = false;

} else {

document.getElementById("checktext3").innerHTML = "* 请再次输入你的密码 √";

check = true;

}

return check;

}

//提交时验证用户类别

function checkut(){

var check;

if(document.getElementById("selUser").selectedIndex == 0)

{

alert("请选择用户类型！");

document.getElementById("selUser").focus();

check = false;

}else{

document.getElementById("checktext4").innerHTML = "* 请选择用户类型 √";

check = true;

}

return check;

}

//提交时验证用户性别

function checkGender(){

var check;

var gender = "";

//获取所有名称为sex的标签

var sex = document.getElementsByName("sex");

//遍历这些名称为sex的标签

for(var i=0;i<sex.length;++i){

//如果某个sex被选中，则记录

if(sex[i].checked)

gender = sex[i].value;

}

if(gender == "")

{

alert("请选择性别！");

check = false;

}else{

document.getElementById("checktext5").innerHTML = "* 请选择你的性别 √";

check = true;

}

return check;

}

//及时验证出生日期

function checkDate(){

var check;

if(document.getElementById("txtDate").value ==""){

alert("请填写出生日期！");

document.getElementById("txtDate").focus();

check = false;

}else{

document.getElementById("checktext6").innerHTML = "* 请选择你的出生日期 √";

check = true;

}

return check;

}

//及时验证兴趣爱好

function checkHobby(){

var check;

var hobby = 0;

//objNum为所有名称为hobby的input标签

var objNum = document.getElementsByName("hobby");

//遍历所有hobby标签

for(var i=0;i<objNum.length;++i){

//判断某个hobby标签是否被选中

if(objNum[i].checked==true)

hobby++;

}

//如果有选中的hobby标签

if(hobby >=1){

document.getElementById("checktext7").innerHTML = "* 请选择你的兴趣爱好 √";

check = true;

}else{

alert("请填写爱好！");

check = false;

}

return check;

}

//正则表达式验证电子邮件（及时）

function checkemail(){

var check;

//电子邮件的正则表达式

var e1 = document.getElementById("email").value.indexOf("@",0);

var e2 = document.getElementById("email").value.indexOf(".",0);

if(email == "" || (e1==-1 || e2==-1) || e2<e1 )

{

alert("E_mail输入错误!");

document.getElementById("email").focus();

check = false;

} else {

document.getElementById("checktext8").innerHTML = "* 请填写常用的EMAIL，将用于密码找回 √";

check = true;

}

return check;

}

//及时验证自我介绍

function checkintro(){

var check;

var intro = document.getElementById("introduction").value;

if (intro.length > 100) {

alert("字数超限！");

check = false;

} else {

document.getElementById("checktext9").innerHTML = "* 限100字内 √";

document.getElementById("checktext9").focus();

check = true;

}

return check;

}

//提交表单时所有都验证一遍(若任何一个验证不通过，则返回为false，阻止表单提交)

function check() {

var check = checkuse() && checkpwd() && checkpwdc() && checkut() && checkGender() && checkDate() && checkHobby()

&& checkemail() &&checkintro();

return check;

}

</script>

</head>

<body >

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

<fieldset>

<legend>

表单及时验证小例子

</legend>

<table align="left" style="background-image: url('img/4.jpg');" >

<tr>

<td>用户名:</td>

<td><input type="text" name="username" id="username" onchange=" checkuse()" /></td>

<td id="checktext1">* 用户名由6-18位字符组成</td>

</tr>

<tr>

<td>密码:</td>

<td><input type="password" name="password" id="password" onchange="checkpwd()" /></td>

<td id="checktext2">* 密码由6-18位字符组成，且必须包含字母、数字和标点符号</td>

</tr>

<tr>

<td>确认密码：</td>

<td><input type="password" name="pwdc" id="pwdc" onchange="checkpwdc()" /></td>

<td id="checktext3">* 请再次输入你的密码</td>

</tr>

<tr>

<td>用户类型：</td>

<td>

<select id="selUser" onblur="checkut()">

<option name="selUser" value="0">请选择</option>

<option name="selUser" value="1">管理员</option>

<option name="selUser" value="2">普通用户</option>

</select>

</td>

<td id="checktext4">* 请选择用户类型</td>

</tr>

<tr>

<td>性别：</td>

<td>

<input type="radio" value="1" name="sex" onchange="checkGender()"/>男

<input type="radio" value="2" name="sex" onchange="checkGender()"/>女

</td>

<td id="checktext5">* 请选择你的性别</td>

</tr>

<tr>

<td>出生日期：</td>

<td><input type="date" name="date" id="txtDate" onblur="checkDate()"/></td>

<td id="checktext6">* 请选择你的出生日期</td>

</tr>

<tr>

<td>兴趣爱好：</td>

<td>

<input type="checkbox" name="hobby" value="reading" onchange="checkHobby()">阅读

<input type="checkbox" name="hobby" value="music" onchange="checkHobby()">音乐

<input type="checkbox" name="hobby" value="sports" onchange="checkHobby()">运动

</td>

<td id="checktext7">* 请选择你的兴趣爱好</td>

</tr>

<tr>

<td>电子邮件：</td>

<td><input type="text" name="email" id="email" onchange="checkemail()"/></td>

<td id="checktext8">* 请填写常用的EMAIL，将用于密码找回</td>

</tr>

<tr>

<td>自我介绍：</td>

<td><textarea cols="30" rows="3" name="introduction" id="introduction" onchange="checkintro()">这是自我介绍...</textarea></td>

<td id="checktext9">* 限100字内</td>

</tr>

<tr>

<td colspan="2" align="center">

<input type="submit" name="submit" value="提交" />

<input type="reset" name="reset" value="重置" />

</td>

</tr>

</table>

</fieldset>

</form>

</body>

</html>

CSS样式：

input:focus,textarea:focus{

border:1px solid #f00;

background:#fcc;

}

textarea{

width:230px;

height:50px;

}

body

{

font-size:15px;

/* 字体的样式 */

font-family:Microsoft YaHei;

}

select option{

font-size:10px;

font-family:Microsoft YaHei;

}

以上就是本文的全部内容，希望对大家的学习有所帮助

js实现表单及时验证功能用户信息立即验证相关推荐

js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
angular js创建表单_如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...
前言开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的在线访问:动态表单校验 github(欢迎star): https://github.com ...
【卡法常用 ckl.js 库】： js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度...
[卡法常用js库]: js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度 // +---------------------- ...
validate.js 插件表单校验
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
springmvc+ztree v3实现类似表单回显功能
在做权限管理系统时,可能会用到插件zTree v3,这是一个功能丰富强大的前端插件,应用很广泛,如异步加载菜单制作.下拉选择.权限分配等.在集成SpringMVC中,我分别实现了zTree的添删改查, ...
Vant-UI 表单组件（Field组件）：验证表单元素表单提交 - 踩坑篇
Vant-UI 表单组件(Field组件):验证表单元素&&表单提交: 示例截图 · 如下: 示例 · 详细代码 · 如下: <template><div class ...
html5 表单必填项,javascript - HTML5表单必填属性。设置自定义验证消息？
javascript - HTML5表单必填属性. 设置自定义验证消息? 我有以下HTML5表格:[http://jsfiddle.net/nfgfP/] ***** 目前当我在空白时点击输入时,会出 ...
Js提交表单的两种方法
提交表单一般有两种一种是submit按钮,一种是调用form的submit方法.虽然都是提交表单,但这两种还是有些差别的. 一般来说,提交form表单的时候需要做一些简单的验证,验证完后才能提交,避免 ...

js实现表单及时验证功能用户信息立即验证

js实现表单及时验证功能用户信息立即验证相关推荐

最新文章

热门文章

js实现表单及时验证功能 用户信息立即验证

js实现表单及时验证功能 用户信息立即验证相关推荐

最新文章

热门文章

js实现表单及时验证功能用户信息立即验证

js实现表单及时验证功能用户信息立即验证相关推荐