使用js进行登录表单验证

很多时候，我们都会用到表单，通常表单验证需要前端后端都要设置，以防用户不规则输入，导致系统崩溃，先上代码吧。

 <script type="text/javascript">function check(){//获取控件内容var loginname = document.getElementById("inputUsername").value;var password = document.getElementById("inputPassword").value;var VerifiCode = document.getElementById("inputVerifiCode").value;loginname = loginname.replace(/\s*/g,"");// 去除空格  防止用户误点password = password.replace(/\s*/g,"");VerifiCode = VerifiCode.replace(/\s*/g,"");if(loginname == ""){alert("用户名不能为空");document.getElementById("inputUsername").focus();//获取焦点return false;}if(password == ""){alert("密码不能为空");document.getElementById("inputPassword").focus();return false;}if(VerifiCode == ""){alert("验证码不能为空");document.getElementById("inputVerifiCode").focus();return false;}//验证成功return true;}</script>

<form class="form-horizontal" onsubmit="return check()" role="form" action="/Login" name="loginform" method="post"><div class="form-group"><label for="inputUsername" class="col-sm-3 control-label"><span class="glyphicon glyphicon-user"></span>&nbsp;学号</label><div class="col-sm-9"><input type="text" class="form-control" name="inputUsername" id="inputUsername" /></div></div><div class="form-group"><label for="inputPassword" class="col-sm-3 control-label"><span class="glyphicon glyphicon-asterisk"></span>&nbsp;密码</label><div class="col-sm-9"><input type="password" class="form-control" name="inputPassword" id="inputPassword" /></div></div><div class="form-group"><label for="inputVerifiCode" class="col-sm-3 control-label"><span class="glyphicon glyphicon-asterisk"></span>&nbsp;验证码</label><div class="col-md-9"><div class="col-md-7"><input type="text" class="form-control" id="inputVerifiCode" name="inputVerifiCode" /></div><div class="col-md-2"><%--下面这块是验证码的--%><a href="javascript:getVerifiCode()"><img id="yzm_img" style="cursor:pointer;width: 100px;height: 36px;margin: 5px 0 0 5px;border-radius: 3px;" title="点击刷新验证码" src="Mcake/getVerifiCode"/></a><script>function getVerifiCode() {$("#yzm_img").prop('src','getVerifiCode?a='+new Date().getTime());}</script><%--上面这块是验证码的--%></div><%--<div class="col-md-9">--%><%--<input type="button" class="form-control" class="btn btn-block btn-default" value="看不清？刷新" />--%><%--</div>--%></div></div><div class="form-group"><div class="row"><div class="col-md-3"></div><div class="col-md-9"><div class="col-md-4 col-md-12"><button type="" class="btn btn-info btn-block" onclick="check()">登录</button></div><div class="col-md-2"></div><div class="col-md-4 col-md-12"><button type="reset" class="btn btn-danger btn-block">重置</button></div></div></div></div></form>

这里面头标记form中 οnsubmit="return check()"一定要加上，因为οnsubmit="return check() 给form加onsubmit 验证所有表单后再提交，可以用返回false 来阻止submit提交
最后感谢各位看官浏览，如果有错，还请说我来，我马上改。

使用js进行登录表单验证相关推荐

企业网站前端制作实战教程 JQuery CSS JS HTML 登录表单验证
引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, ...
BootStrap4登录表单验证示例
BootStrap4登录表单验证示例首先是效果图,如下实现: 在input元素后加上校验的信息反馈,示例如下: <input type="password" class= ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
JS(DOM对象表单验证与正则表达)
目录 DOM对象表单验证 DOM对象 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
JS常用的表单验证（数字、长度,汉字，邮箱，手机号，身份证等）
1.英文字母 >>jsp,html语句 <input type="text" οnblur="checkChart(this.value)" ...
表单必填标星_怎么用JS做form表单验证，要详细代码，求救！（带星号的是必填项）...
匿名用户 1级 2014-06-17 回答举个例子吧: <input type="text" id="telephone" > <input ...
JS常用正则表达式表单验证代码大汇总
正则表达式使用详解简介简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...
注册表单校验 js java,JavaScript表单验证完美代码
用原生JS写一个简单的表单验证首先,是html部分新用户注册基本信息用户名: 请输入至少3位的用户名密码: 请输入4到8位的密码确认密码: 请再输入一遍密码手机号码: 请输入11位手机号 ...
JS源代码实现表单验证
今天要用JavaScript正则做一个表单验证 1.首先是HTML结构 <form action="#">账号:<input type="text&qu ...
js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...

使用js进行登录表单验证

使用js进行登录表单验证相关推荐

最新文章

热门文章