利用正则表达式制作表单提交验证

最新推荐文章于 2024-07-12 16:27:40 发布

Bella2.0

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量580

点赞数 1

分类专栏：小案例文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44759795/article/details/106743176

版权

验证重要性：

前端验证：反馈较快，便于用户纠正（而且省流量），减少了无意义的请求从而减少服务器压力。提高一次性提交的成功率。不仅仅要校验，还要有各种提示，可以提升用户体验。
前端需要校验的：必填项、（邮箱、电话号、地址）格式、密码强度检测非必要。
后端验证：防止接口被私自调用导致破坏数据库结构，如果后端不验证，数据库的安全性就会降低。
后端需要校验的：唯一性验证、验证码、敏感词。

本次案例所需知识：

label标签：

label标签通常和input标签一起使用，label标签为input元素定义标注（标记）。它不会向用户呈现任何特殊效果。 label标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击单选按钮或复选按钮的文本也是可以选中的。
作用：
为鼠标用户改进了可用性，当用户点击label标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；
关联使用方法：
标签的 for 属性可把 label 绑定到另外一个元素。但 “for” 属性的值必须为相关元素的 id 属性的值。

required 属性规定必须在提交之前填写输入域（不能为空）。

三级联动中关于option的问题

option其实就是select下面的选项。下面列举一些常用操作：
1、动态创建select

function creates(){
   
    var sheng=document.createElement("select");//创建一个select
    sheng.id="sheng";//给select设置选择器
    document.body.appendChild(sheng);//将创建好的select渲染到页面上
}

2、添加选项option

function addo(){
   
    var myo=document.getElementById("sheng");//找到刚刚创建好的select
    myo.add(new Option("text","value"));//方法1
    myo.options.add(new Option("text","value"));//方法2
    for(var i=0;i<length;i++){
   
        myo.options[i]=new Option("text","value");//方法3
    }
}

3、删除option

function removeAll(){
   
    var myo=document.getElementById('sheng');
    obj.options.length=0;
}

4.删除一个选项option

function removeOne(){
   
    var myo=document.getElementById('sheng');
    var index=myo.selectedIndex;    //index,要删除选项的序号
    myo.options.remove(index);
}

5.获得选项option的值

var myo=document.getElementById('sheng');
var index=myo.selectedIndex;     //序号，取当前选中选项的序号
var val = myo.options[index].value;

6.获得选项option的文本

var myo=document.getElementById('sheng');
var index=myo.selectedIndex;    
var val = myo.options[index].text;

7.修改选项option

var myo=document.getElementById('sheng');
var index=myo.selectedIndex;    
var val = myo.options[index]=new Option("新文本","新值");

8.删除select

function removeSelect(){
   
    var sheng= document.getElementById("sheng");
    sheng.parentNode.removeChild(sheng);
}

最终代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
    margin:0;padding:0;font-size: 13px;}
        .xing{
    color:#f10215;position:relative;top:2px;}
        ul{
    margin:0 auto;border:1px solid #d054f1;width:600px;font-size:0px;}
        ul>li{
    margin:15px 0;list-style: none;}
        li>label{
    text-align: right;display: inline-block;width:100px;}
        input{
    height:21px;}
        #usersname{
    width:300px;}
        #userstel{
    width:300px;}
        .qunum{
    width:60px;}
        .fengefu{
    font-size:16px;}
        .telnum{
    width:220px;}
        .province,.city,.place{
    width:90px;box-sizing: border-box;height:25px;}
        .province,.city{
    margin-right:12px