用js进行客户端有效性验证

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_32575047/article/details/52840947

接着上一个博客的例子,我将进行用js进行客户端有效性的验证

首先熟悉在这个代码几个常用的词语:

submit 按钮  用来提交表单  自身就有提交的功能 (这点button按钮是无法做到的)

对于这个代码来说:

什么时候会提交表单?

首选应该写在一个onclick = "return checkit()";

当checkit()函数返回true的时候就会提交客户端信息,而当checkit()函数返回false的时候就不会提交客户端信息(在这里我们可以写写提示性的语句,让用户知道该怎么做,这就需要用代码来实现,这次我就用js的代码来实现)


为了避免用户全部打空格,我们应该做点什么


1.我上网查了js去除所有空格的正则表达式

 str =str.replace(/\s+/g,""); (前面的str只是一个变量,你可以随便取,我只是为了方便好理解而已)

2.而去除两头的空格的正则表达式的代码是:

var result=str.replace(/(^\s+)|(\s+$)/g,"");//去掉前后空格
3.选定文本

selectionStart

输入性元素selection起点的位置 ,可读写,通俗的来讲就是选定从哪个地方作为开始读取的地方

selectionEnd

输入性元素selection终点位置,可读写,通俗的额来讲就是选定从哪个地方作为读取完的地方

还可以这样合起来写:

setSelectionRange(Start,end)

4.下面将给出代码

(submit实现验证的我就不写了,上面都有其功能的介绍,这里我就只介绍button按钮来实现验证)



<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
input[type="submit"], #info {
float: left;
}
#info {
margin-left: 15px;
}
</style>
<script type="text/javascript">
function checkit()
{
var str = document.getElementsByName("uname").item(0).value;//将得到的uname值给str,注意item()这个地方
    str =str.replace(/\s+/g,"");//js去除所有空格
if(str.length==0)
{
document.getElementsByName("uname").item(0).selectionStart=0;
document.getElementsByName("uname").item(0).selectionEnd =
document.getElementsByName("uname").item(0).value.length-1;
document.getElementsByName("uname").item(0).focus();
document.getElementById("info").innerHTML = "请输入用户名!"; 
return ;
}
//密码判断省略...

//接下来判断爱好(数组)
var flag = false;
for(var i=0;i<document.getElementsByName("hobby").length;i++)
{
if(document.getElementsByName("hobby").item(i).checked)
{
flag = true;
break;
}
}
if(!flag)
{
document.getElementById("info").innerHTML = "请至少选择一个爱好!"
return ;
}
//alert(flag);
document.f1.submit();
}
</script>
</head>
<body>
<form name="f1" action="show.jsp">
  <table>
    <tr>
      <td>用户名</td>
      <td><input type="text" name="uname"></td>
    </tr>
    <tr>
      <td>密码</td>
      <td><input type="password" name="pwd"></td>
    </tr>
    <tr>
      <td>重复密码</td>
      <td><input type="password" name="pwd1"></td>
    </tr>
    <tr>
      <td>所在省份</td>
      <td><select name="prov">
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="天津">天津</option>
          <option value="重庆">重庆</option>
        </select></td>
    </tr>
    <tr>
      <td>兴趣爱好</td>
      <td><input type="checkbox" name="hobby" value="爬山">
        爬山
        <input type="checkbox" name="hobby" value="上网">
        上网
        <input type="checkbox" name="hobby" value="看书">
        看书
        <input type="checkbox" name="hobby" value="下棋">
        下棋
        <input type="checkbox" name="hobby" value="乒乓球">
        乒乓球 </td>
    </tr>
    <tr>
      <td colspan="2"><input type="button" value="提交信息" onClick="checkit();">
        <div id="info"></div></td>
    </tr>
  </table>
</form>
</body>
</html>


show.jsp代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
//request.setCharacterEncoding("UTF-8");
//response.setCharacterEncoding("UTF-8");
String uname = request.getParameter("uname");//Parameter是参数的意思
String pwd = request.getParameter("pwd");
String prov = request.getParameter("prov");
String[] hobby = request.getParameterValues("hobby");
out.print("你的用户名是:" + uname + "<br>");
out.print("你的密码是:" + pwd + "<br>");
out.print("你的省份是:" + prov + "<br>");
out.print("你的爱好是:");
for (String s : hobby)//for-each循环,注意中间的冒号哦!
{
out.print(s + " ");
}
%>
</body>
</html>


具体代码实现的逻辑思维都在里面了,认真看很简单!

















展开阅读全文

没有更多推荐了,返回首页