注册信息提交JAVAScript

js完成表单数据校验

一.前台校验   (脚本语言)合法用户   

  1.确定事件(onsubmit),并绑定一个函数。

位置:表单

 2.书写这个函数(获取用户输入的信息)

document.getElementById("自定义")  在要获取的表格项中自已定义一个ID,

获取数据值

var value=document.getElementById.value

 3.对用户数据判断 (1.合法就提交表单2.不合法不让提交)

if (value==""){

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

return  false;

}

邮箱的正则表达式

if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(evalue))

(注: onsubmit 有反回值)

οnsubmit=return checkForm()

二.后台校验(暂空)


注:1.邮箱的正则表达式 及判断语句(javaScript)if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(evalue))

       2.获取表单提交数据值:document.getElementById.value

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript在网页开发中常用于前端交互,包括登录注册页面的实现。登录注册页面通常包含以下几个关键部分: 1. HTML结构:页面由表单组成,包括输入字段(如用户名输入框、密码输入框、可能还有邮箱或手机验证码输入框)、登录/注册按钮等。 ```html <form id="loginForm" action="/api/login" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <label for="password">密码:</label> <input type="password" id="password" name="password"> <button type="submit">登录</button> </form> <!-- 注册表单同理 --> <form id="registerForm" action="/api/register" method="post"> ... </form> ``` 2. JavaScript处理:使用JavaScript进行表单验证和提交数据。例如,验证用户名和密码是否为空,长度是否合适,密码是否符合强度要求等。 ```javascript const loginForm = document.getElementById('loginForm'); loginForm.addEventListener('submit', function(e) { e.preventDefault(); // 阻止表单默认提交 const username = document.getElementById('username').value; const password = document.getElementById('password').value; // 进行验证,若验证通过再发送请求 if (validateInput(username, password)) { sendLoginRequest(username, password); } }); // 同样的,对于注册表单也有类似的验证和提交逻辑 ``` 3. 数据发送:通过AJAX或其他手段将表单数据异步发送到服务器接口,通常使用fetch、axios或jQuery的$.ajax方法。 ```javascript function sendLoginRequest(username, password) { fetch('/api/login', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({username, password}) }) .then(response => response.json()) .then(data => handleResponse(data)); } // 注册请求同理 ``` 4. 响应处理:服务器响应后,根据状态码和返回的数据处理结果,比如展示错误信息、跳转到其他页面等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值