demo开始时我们需要准备点东西

1.jQuery 可以去cdn.js上copy一个,

2.我们要安装好node.js, 因为需要自己搭建一个服务器去测试,32位,64位,下载后配置好就行

3.开始写代码吧:

首先我们需要3个input框,分别对应邮箱(用户名),密码,确定密码,然后需要一个submit按钮,可以使用input做也可以使用button(在默认情况下,如果该网页只有一个按钮的情况下,自动生成submit按钮),下面时html的代码:

<

很直的的3个框框,连名字都没有都不知道是做什么的,丑的一批,给它加点样式,css:

.signUp{display: flex;flex-direction: column;height: 100vh;justify-content: center;align-items: center;
}#sign>input{display: block;
}

OK差不多了,反正也是测试,字体就不调的完全对齐了,现在我们可以一眼看到这是干啥的啦,下面我们开始用jQuery写我们在点击按钮后要提交的信息:

思路大致是这样的,首先我们要监听用户点击提交按钮,提交后用AJAX发出请求,然后返回给我们一个隐藏的then方法(Promise),then接受两个函数分别对应服务器返回的结果,成功函数在前,失败函数再后,然后对成功和失败分别作出判断后,把信息输出给用户就完成了。以代码的形式来展示:

$('#sign').on('submit', (e) => {   //这里一定要注意,监听的一定要是form表单的提交事件,为什么不是click事件呢?因为用户提交不一定非要用鼠标点击呀。e.preventDefault();  //因为form默认提交会跳转页面,所以这里是取消它的默认设置,a标签一样适用//这一连串的操作是为了拿到各个input的name的值,(做了一个循环这样不用我们一个一个写了),然后把它们按照key:value的形式存在这个空对象中var hash = {};  let need = ['emall', 'password', 'confirm_password'];need.forEach((name) => {let value = $('#sign').find(`[name=${name}]`).val();hash[name] = value;})//这里的判断是如果用户没有输入油箱就弹窗提示,这里也可以不判断,因为后端一定会判断的。不过了不多发一次请求就地截杀了if(hash.emall === ''){alert('请输入邮箱')return}//下面是用jQuery发送post请求,然后成功怎么样,失败怎么怎么样,ok 我们浏览器的JS写完了,$.post('/signUp', hash).then((response) => {console.log('1')}, (request) => {let { errors } = request.responseJSON;if (errors.emall && errors.emall === 'invalid') {alert('邮箱错了')}})});

下面开始来写服务器的代码,和上篇文章一样,用同样简陋的服务器代码:

我们需要先登上这台服务器,所以先定一个GET请求把,去请求刚才写的网站的HTML吧,

if (path === '/signUp' && method === 'GET') {   var string = fs.readFileSync('./sign-up.html', 'utf8')response.statusCode = 200response.setHeader('Content-Type', 'text/html;charset=utf-8')response.write(string)response.end()
}

好了我们拿到了这个网站的html(就是我们浏览器上看到的样子),我们需要在用户提交后可以做出响应所以我们还需要一个路由

这里我先定了一个函数为了可以拿到我们请求的第4部分,也就是用户输入的信息,
用Promise返回数据。因为用户请求的信息并不是一个整体(不是同时产生的)
,所以要把数据(用户提交的信息)一片一片放在body这个数组中,并把它转化成字符串,再返回出去方便后续处理。
function requestBody(request) {return new Promise((reslove, reject) => {let body = [];request.on('data', (chunk) => {body.push(chunk);}).on('end', () => {body = Buffer.concat(body).toString();reslove(body)});})
}

好我们创建路由,去处理这些请求体并返回给前端信息把:

else if (path === '/signUp' && method === 'POST') {requestBody(request).then((body) => {   //成功拿到请求结果后(上面函数的body)let hash = {};let strings = body.split('&');   //用字符串的API split 让它在'&'时就分割开来,组成一个新的数组例如[123&597,abc&ffa] 转化成[123,597,abo,ffa]strings.forEach((string) => {   //遍历这个数组let part = string.split('=');  //让它分割成一段一段的,然后用=号切割它 得到一个新的数组partlet key = part[0];   // = 前面的数据let value = part[1]; //= 后面的数据hash[key] = value;  //将他们依次放入上面的空对象中})
//循环结束后我们拿到一个我们想要的对象hashlet { emall, password, confirm_password } = hash  这里用到ES6语法  let emall = hash.emall  ...依次赋值emall = decodeURIComponent(emall)   //这里是为了让@能在服务器上显示,不然我们是取不到@符号的if (emall.indexOf('@') === -1) {   //用@符号判断用户是否输入的邮箱response.statusCode = 400;response.setHeader('Content-Type', 'application/json;charset=utf-8')response.write(`{"errors":{"emall":"invalid"}}`);} else if (password !== confirm_password) {response.statusCode = 400response.write('密码不一致');} else {let db = fs.readFileSync('./db', 'utf8');   创建一个数据库(文件),这里使用的是JSON的空数组(string),一定要记得我们存在数据库的值都是string;
要用时把它转化成别的格式,再来使用try {db = JSON.parse(db)    } catch (exit) {         //try catch()  意思是试图去将字符串转成一个JSON对象,如果错误,就重置这个数据库db = []}//下面是判断数据库有不有这个信息,如果有就提示前端这个用户名已经创建,var inUse = false;for (var i = 0; i < db.length; i++) {let personal = db[i];if (personal.emall === emall) {inUse = truebreak;}}if (inUse) {response.statusCode = 400response.setHeader('Content-Type', 'application/json;charset=utf-8')response.write(`{"errors":{"emall":"invalid"}}`);//如果全部成功,邮箱,密码,都对并且没有被注册,就成功了,然后把数据转成string记录到我们的db文件(简单的数据库)中。} else {response.statusCode = 200db.push({ emall: emall, password: password });var dbstring = JSON.stringify(db)fs.writeFileSync('./db', dbstring)}}response.end()})}

asp.net接受表单验证格式后再提交数据_创建一个注册界面,并记录到数据库中...相关推荐

  1. asp.net接受表单验证格式后再提交数据_如何解析 el-form-renderer 表单渲染器1.14.0...

    DEEPEXI 大前端 常人道,一入开发深似海,技术学习无止境.在新技术层出不穷的前端开发领域,有一群身怀绝技的开发,他们在钻研前沿技术的同时,也不忘分享他们的成果,回馈社区.下面,就由小水滴带大家看 ...

  2. asp.net接受表单验证格式后再提交数据_看滴普科技大前端如何玩转el-form-renderer 表单渲染器1.14.0

    DEEPEXI 大前端 常人道,一入开发深似海,技术学习无止境.在新技术层出不穷的前端开发领域,有一群身怀绝技的开发,他们在钻研前沿技术的同时,也不忘分享他们的成果,回馈社区.下面,就由小水滴带大家看 ...

  3. element ui 表单验证通过后没有绿色框 求解 (已解)

    使用element自带的表单验证. 输入框选中状态边框为蓝色, 输入框输入错误的时候边框为红色, 输入正确的时候边框为绿色. 但是有的时候输入正确没有出现绿色(红色和蓝色状态能正常出现) 我的相关代码 ...

  4. jQuery validate 表单验证,涵盖各种类型数据

    本来觉得用这个会很难,结果试了试,发现却是简单了不少东西啊,什么getElementById,if 什么的,只用几个属性名 什么的就可以解决不同状态显示不同提示,很强大很方便. <%@ page ...

  5. 关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案

    - 前言 这几天在做uni-app表单验证时遇到了一个问题,按官方文档给出的方法,当需要数据校验时,只需要 1.为uni-forms中的"modelValue"数据设置" ...

  6. bootstrapValidator验证 表单验证通过但无法提交form的原因

    bootstrapValidator验证时,使用submit提交表单,验证通过,页面没有错误信息.但submit按钮未没有提交. 原因 : submit标签的name或id属性值为submit. $( ...

  7. 基于vue3的京东nutui组件库的表单校验规则:怎样进行表单验证?怎样只使用指定的某一个规则进行校验呢?

    官网: NutUI - 移动端 Vue2.Vue3.小程序 组件库京东风格的轻量级移动端 Vue.React 组件库https://nutui.jd.com/#/component/form 用法: ...

  8. JQuery002: 表单验证及ajax数据提交

    一.三种情况下触发验证事件 输入框失去焦点 -> $('input[!type=button]').blur(function() {}) 输入框输入中 -> $('input[!type ...

  9. 微信小程序的表单验证

    我们写vue项目的时侯经常会用一些ui框架,都会有表单验证 那小程序想要实现前端表单验证通过后再提交给后端怎么实现呢 首先,我们需要一个叫WxValidate.js的代码,网上会有下载一下,不想下载也 ...

最新文章

  1. OpenGL ES之GLSL实现仿抖音“灰度滤镜”和“颠倒滤镜”效果
  2. A*B问题(信息学奥赛一本通-T1036)
  3. tomcat 在WIN10 上运行出现500错误的解决方法
  4. c 获得java数据,获得jar中数据,获得jar数据,// example c
  5. 荣耀x10max能不能升级为鸿蒙,荣耀X10 Max即将亮相:容量很“放肆” 身材却很“克制”...
  6. 知识蒸馏在广告系统中的应用(二)
  7. openstack的逻辑概念_基本概念 - 深入理解 OpenStack 网络实现 Neutron
  8. Fiddler——模拟限速
  9. {过时·留存}MS Office文档
  10. 0024-CENTOS6.5安装CDH5.12.1(一)
  11. 智能垃圾桶(七)——SG90舵机的介绍与使用(树莓派pico实现)
  12. QT 操作 QLabel
  13. C语言实现模拟银行存取款管理系统课程设计(纯C语言版)
  14. 习题11-7 奇数值结点链表 (20分)
  15. Ubuntu下使用FreeRadius实现Wifi认证
  16. Python: dict vs defaultdict
  17. 天猫精灵智能设备对接(2)
  18. 异形3×3魔方还原教程_2345异形魔方教程
  19. [置顶]《游戏引擎架构》信息总汇
  20. 华为和H3c--交换技术

热门文章

  1. 6 款 Java 8 自带工具,轻松分析定位 JVM 问题!
  2. Kubernetes面试题超详细总结
  3. 8 种常见的SQL错误用法
  4. 不开玩笑:请远离那些吃老本的同事
  5. 使用 EasyPOI 优雅导出Excel模板数据(含图片)
  6. 使用级联功能实现蓝绿部署和金丝雀发布
  7. bat 调用python
  8. 年龄估计bridgeNet
  9. frame 2 opencv mat
  10. 比较两个文件夹图像相似度