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

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 = 200
 response.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('=');  //让它分割成一段一段的，然后用=号切割它 得到一个新的数组part
 let key = part[0];   // = 前面的数据
 let value = part[1]; //= 后面的数据
 hash[key] = value;  //将他们依次放入上面的空对象中
      })
//循环结束后我们拿到一个我们想要的对象hash
 let { 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 = 400
 response.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 = true
 break;
          }
        }
 if (inUse) {
 response.statusCode = 400
 response.setHeader('Content-Type', 'application/json;charset=utf-8')
 response.write(`
        {"errors":{"emall":"invalid"}}
      `);

//如果全部成功，邮箱，密码，都对并且没有被注册，就成功了，然后把数据转成string记录到我们的db文件（简单的数据库）中。
        } else {
 response.statusCode = 200
 db.push({ emall: emall, password: password });
 var dbstring = JSON.stringify(db)
 fs.writeFileSync('./db', dbstring)
        }
      }
 response.end()

    })
  }