用js判断html表单是否已更改，没有更改阻止表单提交

需求：从mysql提取出表单数据生成html表单给用户修改，当用户对数据没有修改时，禁止提交表单，防止没必要的数据库读写的。实现方法是，先设置表单禁止提交，然后使用ES6的Object.keys()方法获取集合数量，用JQ监测表单，如果表单变化了，就设置表单可以提交。

前端表单如下：

@csrf



确认修改

JS代码如下：

//用户没有修改表单内容，阻止提交防止不必要的读写数据库
var edit = false; // 记录是否有修改
var testForm = $('.form-group');//$('#form-testForm')[0]等同于document.getElementById("testForm")
//判断使用ES6的Object.keys()方法获取集合数量
var num = Object.keys(testForm).length - 2;//需要减去prevObject 和 __proto__ 
//console.log(num);
var formChange = function() { // 统一处理修改的触发事件
edit = true;
console.log(edit);
$(".form-group").attr("onsubmit","return true");//让表单可以提交
}
for (i = 0; i < num; i++) {
var elements = testForm[i].elements;//循环添加
//console.log(elements);
for (var ii = 0; ii < elements.length; ii ++) {
elements[ii].onchange = formChange; // 为所有的表单元素注册修改事件.
}
}

以上代码，实现了用户没有修改时禁止提交表单，已修改则允许提交，减少了数据库的无谓读写操作。当然，配合Laravel后端的验证会更好。

有时，你可能希望在进行字段唯一性验证时忽略指定 ID 。例如， 在「更新个人资料」页面会包含用户名、邮箱和地点。这时你会想要验证更新的 E-mail 值是否唯一。如果用户仅更改了用户名字段而没有改 E-mail 字段，就不需要抛出验证错误，因为此用户已经是这个 E-mail 的拥有者了。使用 Rule 类定义规则来指示验证器忽略用户的 ID：

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use Illuminate\Validation\Rule;

class UsersController extends Controller
{
    public function show(User $user)
    {
        return view('auth.show', compact('user'));
    }
    public function edit(User $user)
    {
        return view('auth.edit', compact('user'));
    }
    public function update(User $user, Request $request)
    {
//验证表单数据
        $this->validate($request, [
'name' => [
'required',
'max:50',
],
'password' => [
'nullable',
'confirmed',
'min:6',
],
'phone' => [
'nullable',
'regex:/^1[345789][0-9]{9}$/',//正则验证手机号
Rule::unique('users')->ignore($user),//phone唯一，但phone没有更改时也能提交
],
'email' => [
'required',
'email',
'max:255',
Rule::unique('users')->ignore($user),//email唯一，但没有更改时也能提交
],
]);