问题：做项目的时候登录界面打算通过js判断表单提交消息是否符合规则
主要原代码：
<body>
<form method="post" action="servlet/LoginServlet" name="loginform" >
...
<button type="button" onclick="btnSubmit()">登录button>
...
form>
body>
<script type="text/javascript">
function btnSubmit(){
if(loginform.enumb.value==""){
alert("请输入手机号！");
loginform.enumb.focus();
return ;
}
if(loginform.epsw.value==""){
alert("请输入密码！");
loginform.epsw.focus();
return ;
}
loginform.submit;
}
script>
结果得到的的效果是form提交直接跳过js提交给了servlet。
第一次修改:将button里面的type删掉，因为button的submit属性会直接将表单提交给servlet。
<button onclick="btnSubmit()" >登录button>
结果：无用，效果是不符合消息会跳出提示框但是还是会提交给servlet
第二次修改：button按钮type属性值改为button，添加点击函数。
<button type="button" onclick="btnSubmit()">登录button>
然后修改一下js：
function btnSubmit(){
var usernameinput = document.querySelector("#usernameinput");
var userphone = usernameinput.value;
var userpwdinput = document.querySelector("#userpwdinput");
var userpwd = userpwdinput.value;
if (!userphone) {
alert("请输入电话");
}else if(!userpwd){
alert("请输入密码");
}else{
loginform.submit();
}
};
这样就能实现js先判断form表单是否符合要求，再提交给servlet了
完整代码：
<form method="post" action="servlet/loginServlet" name="loginform">
<input type="text" name="usernameinput" id="usernameinput" class="textinput">
<input type="password" name="userpwdinput" id="userpwdinput" class="textinput">
<button type="button" onclick="btnSubmit()">登录button>
form>
function btnSubmit(){
var usernameinput = document.querySelector("#usernameinput");
var userphone = usernameinput.value;
var userpwdinput = document.querySelector("#userpwdinput");
var userpwd = userpwdinput.value;
if (!userphone) {
alert("请输入电话");
}else if(!userpwd){
alert("请输入密码");
}else{
loginform.submit();
}
};
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）