简单的form表单

开发工具与关键技术：MVC和from表单
作者：郑健鹏
撰写时间：2019年5月1日

今天我们来使用layui插件和VS实现简单的form表单，首先我们需要在项目的文件路径里创建个文件夹放置插件来供VS读取,为了美观的原因在编写代码的时候加入JQuery，加入JQuery的原因是写代码比较方便
当创建完项目，第一步就是先把我们需要的这三个插件引入，第二步则是显示form表单，以下是我使用的代码

<div class="frame">
 	<form class="layui-form" action="">
     	<div class="layui-form-item">
         <label class="layui-form-label">用户名</label>
         <div class="layui-input-block">
          <input type="text" name="title" required lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input"
           onkeyup="value = value.replace(/[a-zA-Z _\u4e00-\u9fa5\\s·]/g, '')">
</div>
 	</div>
<div class="layui-form-item">
    		<label class="layui-form-label">密码框</label>
         	<div class="layui-input-inline">
             	<input type="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
     <select name="city" lay-verify="required">
      <option value=""></option>
      <option value="0">北京</option>
      <option value="1">上海</option>
      <option value="2">广州</option>
     </select>
</div>
     </div>
<div class="layui-form-item">
 	<label class="layui-form-label">复选框</label>
     	<div class="layui-input-block">
         <input type="checkbox" name="like[write]" title="写作">
         <input type="checkbox" name="like[read]" title="阅读" checked>
         <input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>

 <div class="layui-form-item">
     <label class="layui-form-label">开关</label>
     <div class="layui-input-block">
     <input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF">
</div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
     <div class="layui-input-block">
     <input type="radio" name="sex" value="男" title="男">
     <input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>

<div class="layui-form-item layui-form-text">
     <label class="layui-form-label">文本域</label>
      <div class="layui-input-block">
      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
     <div class="layui-input-block">
     <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
     </div>
     	</div>
</form>
</div>

上面的代码还使用了正则，是为了用户名只能使用数字，不能使用其他的英文或者汉字和特殊字符，一旦出现特殊的字符则会被删除
表单的提交是直接跳出一个空白的网页并且显示在网页上

//监听提交
form.on('submit(formDemo)', function (data) {
    document.write(JSON.stringify(data.field));
     return false;
});

下图是提交的结果和网页