AJAX表单验证

1.前端组件以及JS+AJAX完成表单数据的上传

<html><head></head><body><fieldset> <div class="form-group"> <input class="form-control" placeholder="请输入用户名" name="username" id="name" required="required" autofocus="" /> </div> <div class="form-group"> <input class="form-control" placeholder="请输入密码" name="password" id="password" type="password" required="required" value="" /> </div> <input value="登录" type="button" class="btn btn-lg btn-success btn-block" onclick="check()" /> </fieldset></body>
<script>
function check(){var xhttp = new XMLHttpRequest();var username = document.getElementById("name").value;var password = document.getElementById("password").value;if(username==""||password==""){alert("不能为空！")}else{var url = "CustomerLogin?username="+username+"&password="+password;xhttp.open("POST",url,true);xhttp.onreadystatechange = function () {if (this.readyState == 4 && this.status == 200) {// Typical action to be performed when the document is ready:   var message=xhttp.responseText;if(message=="success"){window.location.href = 'CustomerShop.html';}else{alert(message);}}};xhttp.send();}
}
</script>
</html>

2.后台表单验证逻辑

public String checkCustomer(Customer cus) {//根据用户名从数据库中查询,并返回ListString hql="from Customer where name=?";HibernateService hs=new HibernateService();List<Customer>cusList=hs.CustomerSearch(hql, cus.getName());//如果按照账号查找存在if(cusList.size()==1) {Customer temp=(Customer)cusList.get(0);//匹配密码是否正确if((cus.getPassword()).equals(temp.getPassword())) {return "success";}else {return "fail";}       }else {return "none";}}

3.后台结果返回部分，也就是Servlet部分

@WebServlet(name="/CustomerLogin",urlPatterns= {"/WEB-UI/pages/CustomerLogin"})
public class CustomerLogin extends HttpServlet {private static final long serialVersionUID = 1L;public CustomerLogin() {super();// TODO Auto-generated constructor stub}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stub//response.getWriter().append("Served at: ").append(request.getContextPath());request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");response.setContentType("text/xml;character=utf-8");Customer cus =new Customer();CustomerService service=new CustomerService();//获取前端发来的信息String name=request.getParameter("username");String password=request.getParameter("password");//中文乱码处理byte [] bytes = name .getBytes("ISO-8859-1");name = new String(bytes, "utf-8");byte [] bytes2 = password .getBytes("ISO-8859-1");password = new String(bytes2, "utf-8");//创建含有登录信息的对象cus.setName(name);cus.setPassword(password);System.out.println(cus.getName()+""+cus.getPassword());//调用CustomerService验证用户是否存在String message="";String result=service.checkCustomer(cus);if(result.equals("success")) {message="success";}else if(result.equals("fail")) {message="密码错误，请重新输入！";}else {message="用户不存在，请重新登录或前往注册！";}//信息返回前端response.getWriter().write(message);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

4.运行结果

AJAX+JavaScript表单验证相关推荐

10个强大的Javascript表单验证插件推荐
创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...
javascript 表单验证大全（一）
javascript 表单验证大全(一) 5.身份证验证:包括15位和18位.function idNumber(s)//身份证验证 {regu1=/^[1-9]\d{7}((0\d)|(1[0-2] ...
html表单验证js代码,JavaScript表单验证实现代码
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输 ...
15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
15个非常实用的JavaScript表单验证库
来源:web前端开发 https://mp.weixin.qq.com/s/p9s9cmAt2MZeCgmD2LC5Sg 客户端验证在任何项目都是不可缺少的,很多时候我们需要在用户提交到服务器之前给予 ...
html自动验证邮件地址格式,JavaScript表单验证和邮箱格式验证的方法
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...
HTML通过JavaScript表单验证
HTML通过JavaScript表单验证用户在填写表单的时候,我们程序对其进行验证是必须的,随便举个例子: <!DOCTYPE html> <html lang="en& ...
注册表单校验 js java,JavaScript表单验证完美代码
用原生JS写一个简单的表单验证首先,是html部分新用户注册基本信息用户名: 请输入至少3位的用户名密码: 请输入4到8位的密码确认密码: 请再输入一遍密码手机号码: 请输入11位手机号 ...
jquery parsley ajax,用户体验超棒且功能强大使用简单的javascript表单验证 - Parsley.js...
大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧,使用这个插件你不需要写任何一行js代码就可以生成一个功能强大的表单验证功能.是不是超棒? 今天介绍的 ...

AJAX+JavaScript表单验证

AJAX表单验证

AJAX+JavaScript表单验证相关推荐

最新文章

热门文章