用户名、密码、复选框，全选各种验证

来源：互联网发布：淘宝网中老年唐装编辑：程序博客网时间：2024/05/21 18:32

1、验证：

客户端验证：

减少服务器负载
缩短用户等待时间
兼容性难

服务器端验证：

统一确认
兼容性强
服务器负载重

2、使用Javascript进行表单检验的常用方法：

[javascript] view plaincopyprint?

1 var username = document.getElementByIdx_x("username");

2 var username = document.getElementsByName("username")[0];

3 var nodes = document.getElementsByTagName_r("input");

2.1、基本的表单验证例子：

HTML代码：

[html] view plaincopyprint?

4 <form onsubmit="return validate()" action="loginServlet">

5 username:<input type="text" id="username" name="username"/><br />

6 password:<input type="password" id="username" name="password"><br />

7 <input type="submit" value="submit" />

8 </form>

username:
password:

JS验证代码：

[javascript] view plaincopyprint?

9 function validate(){

10 //使用getElementById方法获取元素

11 var username = document.getElementByIdx_x("username");

12 var password = document.getElementByIdx_x("password");

13 //使用getElementsByName获取一组元素

14 //var username = document.getElementsByName("username")[0];

15 //var username = document.getElementsByName("password")[0];

16 //获取元素的值并判断长度

17 if(username.value.length == 0){

18 alert("用户名不能为空");

19 return false;

20 }

21 if(password.value.length <6){

22 alert("密码不能少于6位");

23 return false;

24 }

25 return true;

26 }

27 //根据标签获取元素组

28 var nodes = document.getElementsByTagName_r("input");

29 for(var i=0; i

30 //获取标签类型

31 alert(nodes[i].type);

32 }

2.2、单选按钮的验证例子：

HTML代码：

[html] view plaincopyprint?

33 男<input type="radio" name="gender" value="男">

34 女<input type="radio" name="gender" value="女">

JS验证代码：

[javascript] view plaincopyprint?

35 //单选按钮的验证

36 var gender = document.getElementsByName("gender");

37 if(!gender[0].checked && !gender[1].checked){

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

39 }

2.3、复选框全选的例子：

HTML代码：

[html] view plaincopyprint?

40 <input type="checkbox" name="selectAll" onclick="selectAll()">Select all<br />

41 <input type="checkbox" name="number" value="1">1<br />

42 <input type="checkbox" name="number" value="2">2<br />

43 <input type="checkbox" name="number" value="3">3<br />

44 <input type="checkbox" name="number" value="4">4<br />

45 <input type="checkbox" name="number" value="5">5<br />

46 <input type="checkbox" name="number" value="6">6<br />

47 <input type="checkbox" name="number" value="7">7<br />

48 <input type="checkbox" name="number" value="8">8<br />

49 <input type="checkbox" name="number" value="9">9<br />

50 <input type="checkbox" name="number" value="10">10<br /><inputtype="checkbox" name="number">10<br />

JS代码：

[javascript] view plaincopyprint?

52 function selectAll(){

53 var selectAll = document.getElementsByName("selectAll")[0];

54 if(selectAll.checked){

55 var numbers = document.getElementsByName("number");

56 for(var i=0; i

57 numbers[i].checked = true;

58 }

59 } else {

60 for(var i=0; i

61 numbers[i].checked = false;

62 }

63 }

64 }

判断复选框是否有选择：

[javascript] view plaincopyprint?

66 function validateCheckbox(){

67 var n = 0;

68 for(var i=0; i

69 if(numbers[i].checked){

70 n++;

71 }

72 }

73 if(n < 1){

74 alert("至少要选择一项");

75 }

76 }

3、在服务器端使用Servlet进行验证的例子：

[java] view plaincopyprint?

77 @Override

78 protected void doGet(HttpServletRequest req, HttpServletResponse resp)

79 throws ServletException, IOException {

80 String username = req.getParameter("username");

81 String password = req.getParameter("password");

82 //获取单选按钮的值

83 String gender = req.getParameter("gender");

84 //获取复选框的值

85 String[] numbers = req.getParameterValues("number");

86 List list = new ArrayList();

87 //验证判断

88 if("".equals(username)){

89 list.add("用户名不能为空");

90 }

91 if(password == null){

92 list.add("用户密码不能为空");

93 }

94 if(password != null && password.length()<6){

95 list.add("用户密码不能少于6位");

96 }

97 //页面跳转

98 if(list.isEmpty()){

99 req.getRequestDispatcher("index.jsp").forward(req, resp);

100 } else {

101 req.setAttribute("error", list);

102 req.getRequestDispatcher("error.jsp").forward(req, resp);

103 }

104 }

4、Servlet中的编码设置：

[java] view plaincopyprint?

105 req.setCharacterEncoding("utf-8");

106 resp.setCharacterEncoding("utf-8");

107 ...

108 //编码设置

109 gender = new String(gender.getBytes("iso-8859-1"),"utf-8");