如何用html5自带验证 但是用ajax提交

Posted 2023-05-03

//H5自带的验证是比较简单的验证，不完美，只适合比较简单的验证。具体使用方法如下：
//需求：用户名：不能为空，长度在6至12之间，内容为英文

//html
<input type="text" id="user" required minlength=6 maxlength=12 pattern="^[a-zA-Z]+$">

//js
var user = document.getElementById("user");
user.onblur = function()
if(user.validity.valueMissing)
user.setCustomValidity("用户名为空.");
else if(user.validity.tooShort)
user.setCustomValidity("用户名过短.");
else if(user.validity.tooLong)
user.setCustomValidity("用户名过长.");
else if(user.validity.patternMismatch)
user.setCustomValidity("用户名输入错误.");


//required属性：验证是否为空
//pattern属性 ：匹配正则
//validity属性：是H5底层的逻辑提供，原本已经存在的。元素通过elem.validity获得validityState对象
//例如可以获得的对象有：valueMissing 验证是否为空 返回true或false
//再例如：patternMismatch 验证是否匹配正则 同样返回 true或false

怎么使用ajax提交？
你可以将我上面的代码封装成一个check方法，用来检查表单内容是否正确，在用户点击提交按钮的时候不是直接submit表单，而是触发一个表单提交前验证方法check，验证通过后，将表单中的元素获取到，保存在一个变量中下面以jquery的ajax为例：

var jsonData='userName':user.value
$.ajax(
    url:'接口地址'，
    type：'post',
    dataType:'json',
    data:jsonData,
    success:function(data)
        //发送成功后的回调，data包含成功时后台返回的数据
    ,
    error:function(res)
        //发送失败时的回调，res包含失败时的后台返回的数据
    
)

//特别要注意一点的是如果要用ajax发送数据，就不要将提交按钮的type设置为submit，否则form还是会自动提交

参考技术A 1.输入型控件

Input type

用途

说明

email

电子邮件地址文本框

url

网页URL文本框

number

数值的输入域

属性 值 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value number 规定默认值

range

特定值的范围的数值，以滑动条显示

属性 值 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value number 规定默认值

Date pickers

日期，时间选择器

仅Opera9+支持，包含date, month, week, time, datetime, datetime-local

search

用于搜索引擎，比如在站点顶部显示的搜索框

与普通文本框用法一样，只不过这样更语文化

color

颜色选择器

仅Opera支持

将原本type为text的input控件声明为以上特殊类型，是为了给用户呈现不同的输入界面（移动平台上支持这些不同的输入界面，这里就不细说），而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素，请用支持这些表单元素的浏览器查看，IE对其支持最差。
E-mail:
date:
range: number: color:
2. 表单新特性和函数
2.1 placeholder
当用户还没有输入值时，输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息，这在目前网站中很常见，一些JS框架都会提供类似功能，简单的说下在旧版本中常用的解决方案，为输入控件创建一个label，然后通过CSS控制些label的位置使之覆盖在输入控件上面，当label获得焦点时，浏览器会把焦点指向输入控件。不过有了placeholder，新的浏览器就内置了这一功能，其特性值会以浅灰色样式显示在输入框中，当输入框获得焦点并有值后，该提示信息自动消失。
如：

<p><label for="runnername">Runner:</label>
<input id="runnername"name="runnername" type="text" placeholder="First and last name" />
</p>

Runner:本回答被提问者采纳 参考技术B 用fromdata，html5新增的表单属性可以验证，去w3c看。

如何用ajax响应替换html元素？

【中文标题】如何用ajax响应替换html元素？

【英文标题】：How to replace html element with ajax response?

【发布时间】：2013-10-31 21:31:36

【问题描述】：

如何替换 ajax 响应中的 html 元素？我知道要删除元素，如何用 ajax 响应替换已删除的标签？ 例如：

我有这样的代码：

<ul id="products">
...............
</ul>

当我单击一个按钮时，将对 codeginter 控制器进行 ajax 调用，在那里我接收从数据库中提取的新数据并在另一个视图中呈现，该视图从 ul 开始并在关闭 ul 处结束。

在 ajax 成功函数中我这样做：

$('#products').remove();
//What to do now here to replace the removed portion with response of ajax?

【问题讨论】：

您可以根据需要使用.append 或.html。请记住，.remove 完全删除了元素，可能您需要.empty 向我们展示从AJAX 返回的内容，是否全部为<li>？如果是这样，您可以使用.html，它也会清空内容并放入新内容。

Using jQuery to replace one tag with another 的可能重复项

是要替换整个UL，还是只填内容？

您的 ajax 代码的其余部分在哪里？根据您的回复格式.. 如果您的回复是 html 格式，那么您需要做的就是将回复附加到 #products

【参考方案1】：

您可以使用 replaceWith（请参阅：http://api.jquery.com/replaceWith/）

点赞：$('#products').replaceWith(response);

【讨论】：

它正在工作，但被替换的内容被破坏/格式不正确。让我告诉你，新视图稍微改变了 HTML。较旧的以网格格式显示结果，较新的以列表格式显示结果。对于 replaceWith 函数，新旧 HTML 的结构必须完全相同？

也许可以试试$('#products').replaceWith($(response));。如果样式看起来不同，也许检查你的 CSS 选择器。它们必须相同。

【参考方案2】：

假设您要更换产品，如果您从控制器获取格式化的 HTML，那么只需执行此操作

success : function(response) 
$('#products').html(response);

不需要删除

标签。您可以简单地将旧的 s 替换为新的 s

【参考方案3】：

编辑：pascalvgemert 提到的 replaceWith 函数更好https://***.com/a/19527642/2887034

围绕它创建一个包装器：

<div id="wrapper">
    <ul id="products">
    ...............
    </ul>
</div>

现在您可以执行以下操作：

$('#wrapper').html(responseData);

【参考方案4】：

你可以使用JQuery before

$('#products').before("yourhtmlreceivedfromajax").remove();

或者只是将div的内容替换为html$('#products').html("yourhtmlreceivedfromajax");

【参考方案5】：

如果您的主 div 位于另一个具有另一个 id 的容器中，您可以这样做：

基于这个结构：

<div id="mainContainer">
    <ul id="products">
         ...............
    </ul>
</div>

使用 ajax 的 jquery 的 Javascript 代码

$.ajax(
  url: "action.php",
  context: document.body
).done(function(response) 
  $('#products').remove(); // you can keep this line if you think is necessary
  $('mainContainer').html(response);
);

【参考方案6】：

一个简单的方法是将你的 ul 包装在一个容器中

<div id="container">
<ul id="products">
...............
</ul>
</div>

在 ajax 响应中

success:function(data)
$("#container").html(data)

【参考方案7】：

.remove() 将元素完全从 DOM 中取出。如果您只想替换 products 元素中的内容，请使用 .ReplaceWith()。

如果您将所有 <li> 作为 HTML 返回，则可以使用 .html()

【参考方案8】：

这样做

$( "ul#products" ).replaceWith( response );

http://api.jquery.com/replaceWith/